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

我也看到过类似的问题，包括，哪个是老问题。我阅读并关注了这些链接，但目前还不清楚是否有一个合适的解决方案来解决这个问题

我最根本的问题是，我在输入字段上使用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>

---

解决方案是在所有输入字段上设置

tabindex=“-1”

，以保持HTML占位符可见。

我所做的是创建一个额外的输入并使其不可见（

style=“display:none”

），然后给它属性

autofocus=“true”

将其放在对话框内容的末尾，这样它就不会弄乱任何东西。应该是这样的：

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

我最终做了以下工作：

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

您可以使用jquery：

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

---

如果您发现很难跟踪为什么自动对焦被设置到表单的第一个输入字段中的错误，则可以这样做。确保在文档的结束

正文标记之前插入此代码。

如果没有JQuery和JavaScript，我们可以提供仅CSS的解决方案

删除所有焦点的轮廓

:focus {
    outline: 0;
}

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

添加新焦点的大纲

:focus {
    outline: 0;
}

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

---

将此标记添加为页面上的第一个输入字段对我很有用

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

<input type="text" name="fake[email]" style="height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);border:0;outline:none;padding:0;margin:0;color:transparent;" tab-index="-1" aria-hidden="true" value=".">

如果要使用tab键在字段中移动，则不需要javascript并保持选项卡顺序

---

（在Chrome>65、Firefox>59和Edge上测试）

在我的案例中，带有display:none或type=hidden的解决方案没有帮助。你可以用

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

作为第一个输入。

这对我很有用

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

<input type="text" name="fake[email]" style="height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);border:0;outline:none;padding:0;margin:0;color:transparent;" tab-index="-1" aria-hidden="true" value=".">

您链接到的页面完美地回答了您的问题。@mblase75抱歉，但我看不出批准的答案（或其他答案）如何解决这个问题（我是JS新手）。使用javascript在第一个元素上添加模糊。违背了通过选项卡导航表单的目的。这会破坏可访问性。这不是一个可行的折衷办法。这个答案就像说“根本不显示弹出窗口”一样好。我遵循了你的解决方案，但它有一个很大的缺点-如果你将模糊事件绑定到表单上的第一个输入（之前自动聚焦的那个），它将在页面加载后立即触发（尝试使用alert（）或console.log（）。为了避免这种类型的问题，尝试使用文本类型的输入而不是隐藏，例如：

。Chrome也有另一个问题，它第一次工作，但当我关闭对话框并重新打开它时，它会忽略它。你救了我一天。将此作为第一个字段对我有效，它不会在另一个真实字段上触发模糊。这种方法的问题是，如果在输入上有onblur的事件侦听器（即，在模糊元素时进行自动搜索），尽管这将“出现”以解决问题，它还带来了几个可访问性问题：）这很好，您可以节省时间。