$ .focus（）が機能しない

jQueryのの最後の例focus()ドキュメントの状態

$('#id').focus()

入力をフォーカス（アクティブ）する必要があります。私はこれを動作させるようには思えません。

このサイトのコンソールでも、検索ボックスで試しています

$('input[name="q"]').focus()

そして、私は何も得ていません。何か案は？

実際、あなたがこのサイトに集中するために挙げた例は、コンソールに集中していなければ問題なく機能します。機能しない理由は、単に開発コンソールからフォーカスを奪っていないためです。コンソールで次のコードを実行し、その後すぐにブラウザーウィンドウをクリックすると、検索ボックスがフォーカスされていることがわかります。

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

もう一つは、過去に困ったことの一つがイベントの順番です。DOMにアタッチされていない要素に対してfocus（）を呼び出すことはできません。フォーカスしようとしている要素はすでにDOMにアタッチされていますか？

ネット上の他の場所で解決策を見つけました...

$('#id').focus();

動作しませんでした。

$('#id').get(0).focus();

働いた。

ここでの回答のいくつかは、を使用setTimeoutしてターゲット要素に焦点を合わせるプロセスを遅らせることを提案しています。それらの1つは、ターゲットがモーダルダイアログ内にあると述べています。setTimeoutソリューションが使用された場所の具体的な詳細を知らない限り、ソリューションの正確性についてさらにコメントすることはできません。しかし、私がここで答えを出して、私と同じようにこのスレッドに遭遇した人々を助ける必要があると考えました

問題の簡単な事実は、まだ表示されていない要素に焦点を合わせることができないということです。この問題が発生した場合は、ターゲットに焦点を合わせようとしたときに、ターゲットが実際に表示されていることを確認してください。私自身の場合、私はこれらの線に沿って何かをしていました

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

これは機能しませんでした。私はコンソールから$（ '＃elementid'）。focus（） `を実行したときに何が起こっているのかを理解しましたやった仕事を。違いは、ターゲットの上の私のコードでは、アニメーションが完了していない可能性があるため、ターゲットが実際に表示されるかどうかは確実ではありません。そして、手がかりがあります

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

期待どおりに動作します。私も最初はsetTimeout解決策、それもうまく。ただし、任意に選択したタイムアウトは、ホスト要素がターゲット要素が表示されることを確認するプロセスの進行速度に応じて、遅かれ早かれソリューションを中断するようにバインドされています。

ブートストラップ+モーダルを使用する場合、これは私にとってはうまくいきました：

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

他の誰かがこの質問に遭遇し、同じ状況にあった場合に備えて-別の要素をクリックした後にフォーカスを設定しようとしましたが、フォーカスが機能していないように見えました。それは私がちょうど必要だったことがわかりましたe.preventDefault();-ここに例があります：

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

これは役立ちました：

mousedownイベントハンドラーからHTMLElement.focus（）を呼び出す場合は、event.preventDefault（）を呼び出して、フォーカスがHTMLElementから離れないようにする必要があります。ソース：https : //developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

これは古いことに気づきましたが、今日出会いました。答えはどれもうまくいきませんでした。うまくいったとわかったのはsetTimeoutです。setTimeoutを使用して、モーダルの入力フィールドに焦点を当てたいと思いました。お役に立てれば！

私もこの問題を抱えていました。私の場合に機能した解決策は、HTML要素のtabindexプロパティを使用することでした。

使っていた ng-repeatリスト内のいくつかのli要素していて、.focus（）を使用して最初のliにフォーカスを移すことができなかったため、ループ中にtabindex属性を各liに単に追加しました。

だから今 <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

その+1は0から始まるインデックスです。また、.focus（）関数を呼び出す前に、要素がDOMに存在することを確認してください

これがお役に立てば幸いです。

"$（element）.show（）"を使用したために機能しないという問題がある人のために。私はそれを次の方法で解決しました：

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

したがって、タイマーは必要ありません。showメソッドの完了後に実行されます。

focus（）の前に遅延を追加します。200ミリ秒で十分です

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

この問題が今も発生していて、信じられないかもしれませんが、私がしなければならないことは、開発者ツールを閉じることだけでした。どうやら[コンソール]タブは、ページコンテンツよりもフォーカスの優先度が高いようです。

要素とその親が表示されていることを確認してください。非表示の要素にフォーカスを使用することはできません

追加の解決策focus（）が機能しないように見える同じ問題がありましたが、最終的に必要なのは正しい位置にスクロールすることでした。

• https://stackoverflow.com/a/43342974/1335717

私の場合、タブインデックスを指定する必要がありました（-1スクリプトでのみフォーカス可能な場合）

<div tabindex='-1'>
<!-- ... -->
</div>