2

JavaScript（またはjQuery）を使用してテキストボックスに焦点を合わせるにはどうすればよいですか？

ページにテキストボックスがあり、ユーザーがEnterキーを押すと、テキストボックスのフォーカスが失われます。（投稿は発生せず、ページは更新されないことに注意してください）

ユーザーが入力を続行でき、何もクリックする必要がないように、JavaScriptを使用してテキストボックス内にフォーカスを戻すことができるようにしたいと思います。

ユーザーがEnterキーを押した後、次のコードを追加してみました。

$(".focus").focus();

テキストボックスのコード：

<input type="text" class="focus" />

しかし残念ながら、カーソルはテキストボックス内に表示されず、ユーザーは引き続きクリックして入力を続ける必要があります。

この問題を解決するにはどうすればよいですか？

4

2 に答える 2

2

focusコードをに適用する必要がinputあります。ページが読み込まれていないかDOM、コードの実行時に の準備ができていない場合は、まだ適用inputする必要はありませんfocus。

したがって、次のように DOM がロードされていることを確認する必要があります。

$(function(){
    $(".focus").focus();
});

http://jsfiddle.net/c7aUS/

ページの下部、</body>タグの前にコードを含めて、すべての HTML の直後にロードすることもできます。

注: これを jsfiddle で実行している場合、デフォルトではコードはページの読み込み時に実行されます。JQuery を使用すると、次のコードで自動的にラップされます。

$(window).load(function(){
     //your code here
});

編集：

その場合、meetamitは非常に役立ちます。これを探していると思います。

$(function(){
    $(".focus").focus();
    $(".focus").on('keydown', function(event) {
        if(event.which == 13) {// Enter key pressed
            $this = $(this);
            $this.focus();
            var value = $this.val();
            $this.val(''); /* clear the field */
            // do stuff with the value
        }
    });
});​

http://jsfiddle.net/c7aUS/1/

于 2012-11-05T03:41:49.683 に答える
1

Enter キーを押すとフィールドからフォーカスが外れるのはなぜですか? (再現できませんでした。) まだ問題が隠れている可能性があります。そうでないかもしれない。そうでない場合は、これが役立つ場合があります。

$(".focus").on('keydown', function(event) {
    if(event.which == 13) {// Enter key pressed
        event.preventDefault();
    }
});

</p>

于 2012-11-05T03:50:06.770 に答える