2009-11-18 4 views
22

J'ai une zone de texte qui modifie le contenu d'une liste déroulante dans l'événement OnTextChanged. Cet événement semble se déclencher lorsque la zone de texte perd son focus. Comment faire pour que cela se produise sur l'événement keypress ou keyup?Comment faire une publication de boîte de texte sur KeyUp?

Voici un exemple de mon code

<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> 

Ainsi, dans le codebehind, je lie le menu déroulant de la charge de page. L'événement Code_TextChanged redéfinit simplement la liste déroulante. Je voudrais que cela se produise à chaque pression de touche plutôt que lorsque la zone de texte perd son focus.

J'ai hérité ce code récemment et ce n'est pas la méthode idéale de faire cela pour moi, mais les limites de temps me empêcher de réécrire cela dans une méthode de servicy Web.

J'ai essayé d'utiliser jQuery pour lier l'événement « keyup » événement correspondant au « changement » pour la zone de texte, mais cela ne fonctionne que sur la première touche enfoncée.

Répondre

39

Cela permettra de résoudre votre problème. La logique est la même que la solution suggérée par Kyle.

Jetez un oeil à ce sujet.

<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> 

Code va derrière comme ça ...

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"); 
    } 

J'ai ajouté textbox supplémentaire pour voir le changement dans l'action, ne retirez la zone de texte.

+1

la même chose arrive avec cela.Lorsque le panneau de mise à jour actualise la zone de texte perd le focus –

+3

Supprimez simplement AutoPostBack = "true" avec cette solution et cela devrait fonctionner. –

+0

Le commentaire de Rick est correct, supprimez l'AutoPostBack et cela fonctionnera sans problème –

0
+0

J'ai essayé mais cela ne fonctionne que sur la première touche enfoncée. après cela, la zone de texte perd le focus et chaque pression de touche suivante ne déclenche pas l'événement. comme vous pouvez le voir, contrairement au message que vous avez recommandé, ma zone de texte ne se trouve pas dans mon panneau de mise à jour, mais elle perd toujours son focus. –

4

Voici une façon simple de le faire avec javascript, un panneau de mise à jour, gridview, SqlDataSource et une zone de texte. Au fur et à mesure que vous tapez, il recherche dans la table et affiche les résultats. Court et doux, pas de code derrière.

<%@ 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

J'utilise une astuce javascript pour déclencher un événement OnTextChanged, i appeler une fonction de flou et de refocaliser le texte d'entrée (ou, si vous avez beaucoup de texte d'entrée, mise au point de commutation de deux textes d'entrée)

je le tester dans IE et Firefox.

code javascript:

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

code 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> 

Le C# fonction "GridProdotto_SelectedIndexChanging" retrive données de base de données et construire la grille.

Questions connexes