web-dev-qa-db-fra.com

Comment créer une publication de zone de texte sur KeyUp?

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 le focus. Comment est-ce que je peux faire en sorte que cela se produise lors de la frappe ou de l'événement 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>

Donc, dans le codebehind, je lie le menu déroulant sur le chargement de la page. L'événement Code_TextChanged vient de relier le menu déroulant. J'aimerais que cela se produise à chaque pression sur la touche plutôt que lorsque la zone de texte perd son focus. 

J'ai récemment hérité de ce code et ce n'est pas la méthode idéale pour le faire, mais les contraintes de temps m'empêchent de le réécrire dans une méthode de service Web.

J'ai essayé d'utiliser jQuery pour lier l'événement "keyup" afin qu'il corresponde à l'événement "change" de la zone de texte, mais cela ne fonctionne que sur la première touche enfoncée.

asp.netajaxasp.net-ajaxupdatepanelpostback
23
Russ Bradberry

Cela résoudra votre problème. La logique est la même que celle proposée par Kyle.

Regardez ça.

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

Le code derrière va 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é une zone de texte supplémentaire pour voir le changement en action, supprimez la zone de texte.

41
CoderHawk

Voici un moyen simple de le faire avec JavaScript, un panneau de mise à jour, gridview, sqldatasource et une zone de texte. Pendant que vous tapez, il cherche 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>

 

4
B Morgan

J'utilise une astuce javascript pour déclencher un événement OnTextChanged, J'appelle une fonction de flou et ensuite, reconcentre le texte d'entrée

Je l'ai testé 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>

La fonction c # "GridProdotto_SelectedIndexChanging" récupère les données de la base de données et crée la grille.

0
Albicocco

Cela vous aiderait-il?

Comment faire en sorte qu'un TextBox ASP.NET déclenche un événement onTextChanged dans un UpdatePanel AJAX?

0
Kyle Ballard