Javascript/Jquery einfache Benutzererfahrung Funktionen

Question

Ich fange an, etwas Javascript für meine Website zu schreiben, um eine bessere Benutzererfahrung zu erstellen, aber ich bin ein wenig verwirrt darüber, was genau passiert, und vielleicht ist es klar, jemand anderes was ich mache ich falsch oder vermisse es. Ich habe zwei JavaScript-Funktionen, die nach der ersten Verwendung perfekt funktionieren und wenn Sie es langsam verwenden (manchmal überspringt es das nächste Element und wählt nichts aus, wenn Sie zwei Tasten zu schnell drücken). Ich habe das Gefühl, dass mir eine Art $ (Dokument) fehlt .ready (function() {}); Implementierung, um sicherzustellen, dass jeder Prozess abgeschlossen ist, bevor es weitergeht. Ich habe zwei Textfelder, die der Benutzer in zwei Zahlen einträgt, dann geht es weiter zum nächsten Tab-Element (dem nächsten Textfeld). Die Textfelder befinden sich auch in einem asp.net-Update-Panel, wenn dies Auswirkungen hat.

function selectall(item) { 
      $(item).focus().select(); 
    }; 

    function selectNext(textBox) { 
     if ($(textBox).val().length == 2) { 
      $(textBox).next().focus().select(); 
     } 
    }; 

     <asp:TextBox ID="Text1" runat="server" Width="30px" AutoPostBack="True" onkeyup="selectNext(this);" onclick="selectall(this);" 
    Height="20px"></asp:TextBox>: 
       <asp:TextBox ID="Text2" runat="server" Width="30px" AutoPostBack="True" onkeyup="selectNext(this);" onclick="selectall(this);" 
    Height="20px"></asp:TextBox> 
       <asp:DropDownList ID="Text2" runat="server" 

Answer 1

Warum müssen Sie die Textfelder in einem UpdatePanel enthalten?

Es ist möglich, dass das AutoPostback, das Sie in Ihren Textfeldern festgelegt haben, Probleme mit Ihrem jQuery verursacht, da ein Seitenhintertreten immer dann stattfindet, wenn das TextBox-Steuerelement den Fokus verliert.

Ich würde Ihre Textfelder aus Ihrem UpdatePanel entfernen, entfernen Sie die AutoPostback und legen Sie Ihr JavaScript in eine document.ready.

bearbeiten

Code-Snippet:

$(document).ready(function() { 
    $("#fname").keyup(function() { 
     selectNext($(this)); 
    }); 

    $("#fname").focus(function() { 
     $(this).select(); 
    }); 

    $("#lname").keyup(function() { 
     selectNext($(this)); 
    }); 

    $("#lname").click(function() { 
     $(this).select(); 
    }); 
}); 

function selectNext(textBox) { 
    if (textBox.val().length == 2) { 
     setTimeout(function() { 
      textBox.next().focus().select(); 
     }, 5); 
    } 
}