質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1702閲覧

jQuery uiのautocompleteの候補からマウスで選択した場合のフォーカス位置を指定したい

k.t.est

総合スコア49

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/10/29 02:56

編集2020/11/10 03:59

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画面を狭めても当該現象は発生せずでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

デフォルトの挙動をキャンセルした場合はどうなりますでしょうか。
具体的には以下のコードです。

js

1 select: function(event, ui) { 2 $("#first").val(ui.item.name); // <-- 追加 3 4 console.log($("#first").is(':focus'));//true 5 $("#second").focus(); 6 console.log($("#second").is(':focus'));//true 7 console.log($("#first").is(':focus'));//false 8 9 return false; // <-- 追加 10 } 11

投稿2020/11/10 03:29

plasticgrammer

総合スコア629

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k.t.est

2020/11/10 04:01

ご教示有難う御座います。 ご教示頂いた2行を追加したのですが、現象は変わらずでした。 一方で「追加情報」として追記したのですが、当該現象はスマホもしくはdeveloperツールのdevice toolvarでスマホ画面にした場合にのみ発生することが分かりましたので、ご連絡させて頂きたく存じます。
plasticgrammer

2020/11/10 04:09 編集

承知しました。 これも根本的な解決ではありませんが、focus処理を非同期にしてタイミングを遅らせてみるとどうなりますでしょうか。 setTimeout(function(){ $("#second").focus(); }, 10); // 10ミリ秒後にfocus
k.t.est

2020/11/10 05:13

ご教示有難う御座います。 これで意図する挙動にすることが出来ました(1ミリ秒後の指定で問題ありませんでした)! なぜこういった現象となるのかは不明のままです...
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問