1

私は自分のサイトでより良いユーザーエクスペリエンスを作成するために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"
4

1 に答える 1

0

UpdatePanelにテキストボックスを含める必要があるのはなぜですか？

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

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

編集

コードスニペット：

$(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);
    }
}
于 2012-04-11T07:27:43.580 に答える