web-dev-qa-db-ja.com

jQueryで次の入力にフォーカスを移動するにはどうすればよいですか？

JQueryでオートコンプリートプラグインを使用していますが、正常に機能しています。ただし、IEでは、ユーザーがオートコンプリートでアイテムを選択すると、フォーカスは次の入力フィールドに移動しません。当然、Firefoxでも機能します。プラグインには組み込みのソリューションはありませんが、「オプション」を提供します。次の入力フィールドに強制的に移動する方法はありますか？

jqueryautocomplete
48
Matt

次のようなことができます：

$("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq( inputs.index(this)+ 1 ).focus();
});

ここに投稿された他の回答は、次の入力が非常に次の兄弟要素に依存しているため、うまくいかない場合があります。このアプローチはフォームに行き、次の入力タイプ要素を検索します。

91
Nick Craver

JQuery UIにはすでにこれがあります。以下の私の例では、最大文字数を入力した場合、次のフォーカス可能な要素（入力、選択、テキストエリア、ボタン、オブジェクト）に焦点を合わせるためにmaxchar属性を含めました

HTML：

text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
    <option value="1">1</option>
    <option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
    <option value="1">1</option>
    <option value="1">2</option>
</select>

Javascript：

$(function() {
    var focusables = $(":focusable");   
    focusables.keyup(function(e) {
        var maxchar = false;
        if ($(this).attr("maxchar")) {
            if ($(this).val().length >= $(this).attr("maxchar"))
                maxchar = true;
            }
        if (e.keyCode == 13 || maxchar) {
            var current = focusables.index(this),
                next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
            next.focus();
        }
    });
});
27
Lambert Antonio

サムの意味は：

$('#myInput').focus(function(){
    $(this).next('input').focus();
})
11
ant

次のようなものを使用してみてください。

            var inputs = $(this).closest('form').find(':focusable');
            inputs.eq(inputs.index(this) + 1).focus();
7
bussa

単にidにジャンプして単純なフォーカスをしたい入力フィールドを単に与えないのはなぜですか

$("#newListField").focus();
5
mindmyweb

私はちょうどあなたが探していることをするjQueryプラグインを書いた（私は自分でアンディソリューションを見つけることができなかったことに悩まされた（tabStop-> http://plugins.jquery.com/tabstop/ ）

1
Hoffmann

例としてHTMLを投稿していただけますか？

それまでの間、これを試してください：

$('#myInput').result(function(){
    $(this).next('input').focus();
})

テストされていないため、おそらく微調整が必​​要になります。

1
Sam

eq を使用して、特定の要素に到達します。

index に関するドキュメント

$("input").keyup(function () {
   var index = $(this).index("input");                  
   $("input:eq(" + (index +1) + ")").focus(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />

<input type="text" maxlength="1"  />

<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />
1
temo
  function nextFormInput() {
      var focused = $(':focus');
      var inputs = $(focused).closest('form').find(':input');
      inputs.eq(inputs.index(focused) + 1).focus();
  }
1
Aditya Mittal

これが私の場合にうまくいったものです。パフォーマンスがそれほど集中しない可能性があります。

$('#myelement').siblings('input').first().focus();
0
rncrtr

最も簡単な方法は、タブインデックスからまとめて削除することです。

$('#control').find('input[readonly]').each(function () {
    $(this).attr('tabindex', '-1');
});

すでにいくつかのフォームでこれを使用しています。

0
jfreak53

あなたの猫はそれを使用します

$(document).on("keypress","input,select",function (e) {
    e.preventDefault();
    if (e.keyCode==13) {
        $(':input:eq(' + ($(':input').index(this) + 1) +')').focus();
    }
});
0
NASSER KHANZADI

スクリプトでevent.preventDefault（）を使用している場合は、IEが気に入らないのでコメントアウトします。

0
anuj pradhan
var inputs = $('input, select, textarea').keypress(function (e) {
  if (e.which == 13) {
    e.preventDefault();
    var nextInput = inputs.get(inputs.index(this) + 1);
    if (nextInput) {
      nextInput.focus();
    }
  }
});
0
jopla