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

Question

我在 SO 上看到过类似的问题，包括 这个，它是旧的。我阅读并关注了链接，但目前还不清楚今天是否有适当的解决方案来解决这个问题。

我的根本问题是我在输入字段上使用 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"); }
        }
    ] });
});

原文由 Jérôme Verstrynge 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Jérôme Verstrynge 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我所做的是我创建了一个额外的输入并使其不可见（ style="display:none" ）然后赋予它属性 autofocus="true" 将其放在对话框内容的末尾，这样它就不会弄乱任何东西。它应该是这样的：

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

原文由 Tyler Richardson 发布，翻译遵循 CC BY-SA 3.0 许可协议