Jquery モバイルを使用している場合、キーボードでの選択からオプションを選択すると、DOM の次の入力にタブ移動できません。jquery モバイル ビットを取り出すと、期待どおりに動作します。
私は次のhtmlを持っています:
<body>
<input type='text' id='starter' /><br />
<select id='sel'>
<option value=''></option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select><br />
<input type='text' id='ender' /><br />
</body>
以下のjqueryおよびjquery mobileを使用して、フィドラーでこれを設定しました。
http://jsfiddle.net/58jkj1wa/ - 生の jquery は期待どおりに動作します。
http://jsfiddle.net/a5reojmo/4/ - jquery モバイルの壊れた選択。
問題を再現するには、次の手順を実行します。
- カーソルは最初の入力から始まります
- 「タブ」を押して選択に移動します
- 下矢印を押してオプションを有効にします
- 下矢印を押して最初のオプションを選択します
- Return キーを押して変更を受け入れます (非モバイル - フォーカスが正しく選択されました)。
- タブを押す
モバイル以外のバージョンでは、カーソルは期待どおり 2 番目の入力に表示されるようになりました。モバイル版では、どこか別の場所にある...そして、どこかはわからない。フォーカスが最初の入力に再び移動するためのタブがたくさんあります...次に、入力を介して、使用した選択の後に必要なフィールドに移動します。
個人的にはこれはバグだと思うので、準備ができていると感じた最も干渉するのは、 on change トリガーを試して、次のように選択にフォーカスを戻そうとすることでした:
$("#sel").on("change", function (e) {
$("#sel").focus();
});
しかし、これはうまくいきません。他の場所でフォーカス呼び出しを行うと、期待どおりに機能し、値を変更しなければ正しく強調表示され、タブがオフになります。しかし、値を変更するとすぐに、フォーカスは別の場所になります。
ただし、次の項目にフォーカスを設定できます。
$("#sel").on("change", function (e) {
$("#ender").focus();
});
しかし、これは、私が行っている入力の動的な非表示の一部を行うことができず、フォーム内のフロー処理をプログラムでミラーリングする必要があることを意味するため、これを行いたくありません。
JQM が追加するラッパーの一部を更新しようとしましたが、別の入力にフォーカスを設定してからもう一度戻し、オプションで selectmenu の更新を試みましたが、モバイルはまだ次の入力にタブアウトできません。また、さまざまな blur() および focus() 呼び出しを試しましたが、すべて役に立ちませんでした。
この回答がキーダウンハンドラーを追加することで同様のことをしているのを見ましたが、値の変更後にフォーカスがどこにあるのかわからないため、キーダウンハンドラーを追加する場所がわかりません...さらに、これはJQuery Mobileのように聞こえますバグじゃないですか？？
JQuery Mobile で選択を変更した後、タブとフォーカス ハイライトを正しく機能させる方法を知っていますか?
これは報告すべきバグですか?