web-dev-qa-db-ja.com

HTMLフォームをJQueryダイアログとしてポップするときに、最初の入力フィールドに自動的にフォーカスしないようにする方法は？

this one （これは古い）を含め、SOで同様の質問を見てきました。リンクを読んでフォローしましたが、今日この問題の適切な解決策があるかどうかは不明です。

私の一番の問題は、HTMLのplaceholder="..."入力フィールド。最初のフィールドに自動的に焦点を合わせると、そのプレースホルダーはユーザーには見えなくなります。

[〜＃〜] edit [〜＃〜]

これが私の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"); }
        }
    ] });
});
jqueryhtmlplaceholderautofocusinput-field
21
Jérôme Verstrynge

解決策は、[〜＃〜] all [〜＃〜]入力フィールドにtabindex="-1"を設定して、HTMLプレースホルダーを表示したままにすることです。

5
Jérôme Verstrynge

私がしたことは、余分な入力を作成し、それを非表示にしました（style="display:none"）その後、プロパティautofocus="true"これをダイアログのコンテンツの最後に配置して、何も混乱しないようにします。次のようになります。

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

このタグをページの最初の入力フィールドとして追加するとうまくいきます。

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

タブキーを使用してフィールド間を移動する場合、javascriptは不要で、タブの順序が保持されます。

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

7
Mike

私はこれをやった：

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

Jqueryを使用できます。

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

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

1
Felix Jr