jQuery uiのautocomplete機能で選択肢を表示させ、そこからマウスで候補を選択した後のフォーカス位置を指定したいのですが、マウスで選択するとautocompleteを表示している入力欄にfocusが当たってしまいます。
次の入力欄にフォーカスを移動させたいのですが、実行方法をご教示頂けますでしょうか?
(キーボードの↑↓キーで候補から選択した場合にはfocusはsecondに移ります。マウスとキーボードで選択後の挙動が異なる理由も不明です。)
autocompleteのselect内ではfocusはfirstからsecondに移動しているので、
select後にfocusがfirstに戻されているようです。
html
1<input type="text" id="first"> 2<input type="text" id="second"> 3
javascript
1$(function(){ 2 $("#first").on("keyup focusin",function(){ 3 $("#first").autocomplete({ 4 source: function(req, resp){ 5 $.ajax({ 6 url: "autocomplete.php", 7 type: "POST", 8 cache: false, 9 dataType: "json", 10 data: { 11 name: req.term 12 }, 13 success: function(o){ 14 resp($.map(o, function(item) { 15 return { 16 label: item.name, 17 value: item.name 18 } 19 })); 20 }, 21 timeout : 10000, 22 error: function(xhr, ts, err){ 23 } 24 }); 25 }, 26 autoFocus : true, 27 minLength : 2, 28 select: function(event, ui){ 29 console.log($("#first").is(':focus'));//true 30 $("#second").focus(); 31 console.log($("#second").is(':focus'));//true 32 console.log($("#first").is(':focus'));//false 33 } 34 }); 35 }); 36}); 37 38
##バージョン
jQuery : 3.3.1
jQuery UI : 1.12.1
##追加情報(2020/11/10)
当該現象の発生が確認できたのは、実機スマホ(OS:android)とChromeのdeveloper toolのスマホウィンド(device toolvar)ということがわかりました。(iPhoneは手元になく、未確認です。)
なお、device toolvarを用いた場合と同じ横幅(例えば360px)に、Chrome画面を狭めても当該現象は発生せずでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/10 04:01
2020/11/10 04:09 編集
2020/11/10 05:13