2009-11-18 14 views
22

Tengo un cuadro de texto que cambia el contenido de un menú desplegable en el evento OnTextChanged. Este evento parece activarse cuando el cuadro de texto pierde el foco. ¿Cómo puedo hacer que esto suceda en el evento keypress o keyup?¿Cómo realizo una devolución de datos de cuadro de texto en KeyUp?

Aquí es un ejemplo de mi código

<asp:TextBox ID="Code" runat="server" AutoPostBack="true" OnTextChanged="Code_TextChanged">     

<asp:UpdatePanel ID="Update" runat="server"> 
    <ContentTemplate> 
     <asp:DropDownList runat="server" ID="DateList" />    
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="Code" /> 
    </Triggers> 
</asp:UpdatePanel> 

Así que en el código subyacente, Ato el menú desplegable al cargar la página. El evento Code_TextChanged simplemente vuelve a enlazar el menú desplegable. Me gustaría que esto suceda en cada pulsación de tecla en lugar de cuando el cuadro de texto pierde el foco.

Heredé este código recientemente y este no es el método ideal para hacer esto por mí, pero las limitaciones de tiempo me impiden volver a escribir esto en un método de servicio web.

He intentado usar jQuery para enlazar el evento "keyup" para que coincida con el evento "change" para el cuadro de texto, pero esto solo funciona con la primera tecla presionada.

Respuesta

39

Esto va a resolver su problema. La lógica es la misma que la solución sugerida por Kyle.

Eche un vistazo a esto.

<head runat="server"> 
<title></title> 
<script type="text/javascript"> 
    function RefreshUpdatePanel() { 
     __doPostBack('<%= Code.ClientID %>', ''); 
    }; 
</script> 

    <asp:TextBox ID="Code" runat="server" onkeyup="RefreshUpdatePanel();" AutoPostBack="true" OnTextChanged="Code_TextChanged"></asp:TextBox> 
    <asp:UpdatePanel ID="Update" runat="server"> 
     <ContentTemplate> 
      <asp:DropDownList runat="server" ID="DateList" /> 
      <asp:TextBox runat="server" ID="CurrentTime" ></asp:TextBox> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="Code" /> 
     </Triggers> 
    </asp:UpdatePanel> 

Código va detrás como esto ...

protected void Code_TextChanged(object sender, EventArgs e) 
    { 
     //Adding current time (minutes and seconds) into dropdownlist 
     DateList.Items.Insert(0, new ListItem(DateTime.Now.ToString("mm:ss"))); 

     //Setting current time (minutes and seconds) into textbox 
     CurrentTime.Text = DateTime.Now.ToString("mm:ss"); 
    } 

He añadido cuadro de texto adicional a ver un cambio en la acción, no retire la caja de texto.

+1

, lo mismo sucede con esto.Cuando el panel de actualización se actualiza, el cuadro de texto pierde el foco –

+3

Simplemente elimine AutoPostBack = "true" con esta solución y debería funcionar. –

+0

El comentario de Rick es correcto, elimine el AutoPostBack y funcionará sin problemas –

4

Aquí hay una manera simple de hacerlo con javascript, un panel de actualización, gridview, sqldatasource y un cuadro de texto. A medida que escribe, busca en la tabla y muestra los resultados. Corto y dulce, sin código detrás.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test3.aspx.vb" Inherits="test3" %> 

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/javascript"> 
    function runPostback() { 
     document.forms["form1"].submit(); 
     document.getElementById("TextBox1").focus(); 
    } 
    function getFocus(){ 
     var text = document.getElementById("TextBox1"); 
     if (text != null && text.value.length > 0) { 
      if (text.createTextRange) { 
       var FieldRange = text.createTextRange(); 
       FieldRange.moveStart('character', text.value.length); 
       FieldRange.collapse(); 
      FieldRange.select(); } } 
} 

function SetDelay() { 
    setTimeout("runPostback()", 200); 
} 




</script> 
</head> 
<body onload="getFocus()"> 
<form id="form1" runat="server"> 
<div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="TextBox1" /> 
     </Triggers> 
     <ContentTemplate> 
      <asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server"></asp:TextBox> 
      <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"> 
      </asp:GridView> 
      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:purchasing2ConnectionString %>" 
       SelectCommand="SELECT [name] FROM [vendors] WHERE ([name] LIKE @name + '%')"> 
       <SelectParameters> 
        <asp:ControlParameter ControlID="TextBox1" Name="name" PropertyName="Text" Type="String" /> 
       </SelectParameters> 
      </asp:SqlDataSource> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 
</form> 

0

utilizo un truco Javascript para disparador de un evento OnTextChanged, que llamo una función de toma y de volver a centrar el texto de entrada (o, si usted tiene muchos texto de entrada, el enfoque del interruptor a partir de dos entradas de texto)

Lo he probado en IE y Firefox.

código javascript:

function reFocus(id) 
    { 
     document.getElementById(id).blur(); 
     document.getElementById(id).focus(); 
    } 

código aspx

<asp:TextBox ID="txtProdottoLike" runat="server" 
       ontextchanged="txtProdottoLike_TextChanged" 
       onKeyUp="reFocus(this.id);" 
       AutoPostBack="True"> 
</asp:TextBox> 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>     
<asp:UpdatePanel ID="Update" runat="server"> 
    <ContentTemplate> 
     <asp:GridView ID="GridProdotto" runat="server" AllowPaging="False" 
       AllowSorting="False" ForeColor="#333333" GridLines="None" 
      OnSelectedIndexChanging="GridProdotto_SelectedIndexChanging" 
      Visible="True" Width="100%" Height="100%" AutoGenerateColumns="False"> 
      <RowStyle BackColor="WhiteSmoke" Font-Size="11px" /> 
      <AlternatingRowStyle BackColor="White" /> 
      <Columns> 
       <asp:BoundField DataField="Prodotto"> 
        <ItemStyle Width="80px" HorizontalAlign="Left" /> 
        <HeaderStyle HorizontalAlign="Left" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="Descrizione"> 
        <ItemStyle HorizontalAlign="Left" /> 
        <HeaderStyle HorizontalAlign="Left" /> 
       </asp:BoundField> 
       <asp:CommandField SelectText="Seleziona" ShowSelectButton="True" ItemStyle-HorizontalAlign="Right"></asp:CommandField> 
      </Columns> 
     </asp:GridView> 
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="txtProdottoLike" /> 
    </Triggers> 
</asp:UpdatePanel> 

La función C# "GridProdotto_SelectedIndexChanging" retrive datos de base de datos y construir la red.

Cuestiones relacionadas