web-dev-qa-db-ja.com

jquery .focus（）が機能しない理由は何ですか？

ELEMENT_ID.focus（）は特定の時間に非表示になっているdiv内にあると考える人もいます。

これは簡単に解決できる問題ですが、私は苦労しています:(

***コードは正常に機能します。テキストフィールドは、ページのロード時にフォーカスされていません。

ステップ1 [解決済み] JAVASCRIPT：

$("#goal-input").focus();

$('#goal-input').keypress(function(event){
 var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13') {
etc, etc, etc
}

HTML

<input type="text" id="goal-input" name="goal" />

[ステップ2]ジャバスクリプト：

 if (goal) {
          step1.fadeOut('fast', function() {
          step1.hide();
          step2.fadeIn('fast');

etc, etc

HTML：

  <div id="step-2">
        <div class="notifications">
        </div>
        <input type="text" id="name"   name="name" placeholder="Name" />
               <script type="text/javascript">
              $(function(){
              $("#name").focus();
              });
            </script>

ステップ2が機能しないのはなぜですか？ :(

jqueryfocus
32
dngoo

HTMLの下にコードを配置するか、ドキュメントロードイベントを使用する場合はロードする必要があります。

<input type="text" id="goal-input" name="goal" />
<script type="text/javascript">
$(function(){
    $("#goal-input").focus();
});
</script>

更新：

すべてがすでにロードされているため、divを切り替えてもドキュメントのロードイベントはトリガーされません。 divを切り替えるときに、フォーカスする必要があります。

if (goal) {
      step1.fadeOut('fast', function() {
          step1.hide();
          step2.fadeIn('fast', function() {  
              $("#name").focus();
          });
      });
}
16
jgauffin

ページに移行する要素（フォーム入力）にフォーカスをトリガーする際に問題が発生しました。 setTimeout内から遅延なしでフォーカスイベントを呼び出すことで修正できることがわかりました。私が理解しているように（例えば this answer から）、これは現在の実行キューが終了するまで関数を遅らせるので、この場合は遷移が完了するまでフォーカスイベントを遅らせます。

setTimeout(function(){
    $('#goal-input').focus();
});
37
Nick F

入力フィールドを最初に表示する必要があることを忘れないでください。その後、入力フィールドに焦点を合わせることができます。

$("#elementid").show();
$("#elementid input[type=text]").focus();
7
n0mad

要素が非表示になっている場合、そのようにフォーカスを適用しているときに次のようなことを試してください。エラーはスローされません。

$("#elementid").filter(':visible').focus();

要素を表示する方が理にかなっている場合がありますが、レイアウトに固有のコードが必要になります。

4
Kevin B

focusは、テキスト要素（通知divなど）にフォーカスしようとすると機能しませんが、入力フィールドにフォーカスすると機能することがわかりました。

3
Martin

これは解決しました!!!

setTimeout(function(){
    $("#name").filter(':visible').focus();
}, 500);

それに応じて時間を調整できます。

3
Mohammed Rishad

.focus()でフォーカスできるのは「キーボードフォーカス可能」要素のみです。 divは、ネイティブにフォーカスできるように意図されていません。それを実現するには、tabindex="0"属性を追加する必要があります。 input、button、aなどはネイティブにフォーカス可能です。

1
WegPast