在将HTML表单弹出为JQuery对话框时,如何避免自动关注第一个输入字段？

Question

我在SO上看过类似的问题,包括这个问题,这个问题已经过时了.我阅读并关注了链接,但目前还不清楚今天是否有适当的解决方案.

我的底层问题是我placeholder="..."在输入字段上使用HTML .通过自动聚焦在第一个字段上,其占位符对用户不再可见.

编辑

这是我的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

我做了什么是我创建了一个额外的输入并使其不可见(style="display:none")然后给它的属性autofocus="true"把它放在对话框内容的末尾,所以它不会搞乱任何东西.它应该是这样的:

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

Answer 2

添加此标记作为页面上的第一个输入字段适合我.

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

如果要使用Tab键在字段中移动,则无需使用javascript并保留Tab键顺序.

(在Chrome> 65,Firefox> 59和Edge上测试过)

Answer 3

我最终这样做了:

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

Answer 4

解决方案是tabindex="-1"在所有输入字段上设置以保持HTML占位符可见.

Answer 5

就我而言，使用 display: none 或 type=hidden 的解决方案没有帮助。您可以使用

<div style="max-width: 0; max-height: 0; overflow: hidden;">
    <input autofocus="true" />
</div>

作为第一个输入。