jQueryダイアログとしてHTMLフォームをポップするときに、最初の入力フィールドに自動焦点を避ける方法は？

Question

私は同様の質問を含めて見ました これです, 、これは古いです。私はリンクを読んで従いましたが、今日この問題に適切な解決策があるかどうかは不明です。

私の一番下の問題は、私がHTMLを使用しているということです placeholder="..." 入力フィールドで。最初のフィールドに自動的に焦点を合わせることにより、そのプレースホルダーはもはやユーザーには見えません。

編集

これが私のHTMLコードです：

<div id='LOGIN_FORM' title="Login">
    <form action="">
        <input type="text" name="login_id" required="required"
                           placeholder="Enter user ID" /><br />
        <input type="password" name="login_pwd" required="required"
                           placeholder="Enter password" /><br />
    </form>
</div>

これが私のJSコードです：

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});

Answer 1

解決策は、設定することです tabindex="-1" の上 全て HTMLプレースホルダーを表示するための入力フィールド。

Answer 2

私がしたことは、追加の入力を作成して目に見えないようにしたことでした（style="display:none"）その後、プロパティを与えました autofocus="true" これをダイアログコンテンツの最後に置いて、何も混乱しないようにします。このように見えるはずです：

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>

Answer 3

このタグをページ上の最初の入力フィールドとして追加すると、私にとっては機能します。

<input type="text" autofocus="autofocus" style="display:none" />

JavaScriptは必要ありませんし、TABキーを使用してフィールドを移動する場合は、タブの順序を保持します。

（Chrome> 65、Firefox> 59およびEdgeでテスト）

Answer 4

私はこれをすることになりました：

<input type="text" style="position: fixed; left: -10000000px;" disabled/>

Answer 5

jqueryを使用できます。

jQuery(document).ready(function(e) {
   $('input[name="login_id"]').blur(); 
});

これは、バグをトレースするのが難しいと思う場合、オートフォーカスがフォームの最初の入力フィールドに設定される理由。閉鎖前にこのコードを必ず挿入してください </body> ドキュメントのボディタグ。

Answer 6

jQueryとJavaScriptがなければ、CSSのみのソリューションを提供できます。

1. すべてのフォーカスのアウトラインを削除します

   :focus {
       outline: 0;
   }
   

2. 新しいフォーカスのアウトラインを追加します

   :link:focus, :visited:focus {
       outline: none;
   }