Javascript/Jqueryのシンプルなユーザーエクスペリエンス機能

Question

より良いユーザーエクスペリエンスを作成するために、私のサイト用のJavaScriptを書き始めていますが、ちょうど何が起こっているのかちょっと混乱しています。間違っているか不足しています。私は2つのjavascript関数を使っています。最初に使用した後、ゆっくりと使うと（たぶん次の項目をスキップして、2つのキーを押しすぎると何も選択しない）私は何らかの$（document）.ready（function（）{}）が欠けていると感じます。各プロセスが移動する前に完了していることを確認する実装。ユーザーが2つの数字を入力する2つのテキストボックスがあり、次のタブ要素（次のテキストボックス）に移動します。テキストボックスは、それが影響を与える場合は、asp.netの更新パネルにもあります。

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

なぜ、UpdatePanelにテキストボックスを含める必要がありますか？

テキストボックスに設定したAutoPostbackは、TextBoxコントロールがフォーカスを失うたびにページポストバックが発生するため、jQueryに問題が発生する可能性があります。

私はUpdatePanelからテキストボックスを取り出し、AutoPostbackを削除し、JavaScriptをdocument.readyに配置します。

編集

コードスニペット：それはいくつかを埋めるために、サーバーにポストバックする必要があるいくつかのユーザー入力のためのjQueryのダイアログポップアップの一部であるため

$(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); 
    } 
}