如何在将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

---

你链接的页面完美地回答了你的问题。 - Blazemonger

@mblase75 抱歉，但我不明白已批准的答案（或其他答案）如何解决这个问题（我是JS新手）。 - Jérôme Verstrynge

使用JavaScript在第一个元素上添加模糊效果。http://www.coding-issues.com/2016/03/remove-auto-focus-from-first-input-field-sales-force.html - Ranadheer Reddy

Answer 1

我所做的是创建一个额外的输入框并使其不可见(style="display:none")，然后给它附加属性autofocus="true"，将其放置在对话框内容的末尾，这样就不会影响其他内容。它应该看起来像这样：

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

- Tyler Richardson

---

我按照你的解决方案操作了，但它有一个很大的缺点——如果将 blur 事件绑定到表单上的第一个输入框（在页面加载之前自动聚焦的那个），它会在页面加载后立即触发（可以尝试使用 alert() 或 console.log()）。为避免这种问题，请尝试使用 text 类型的输入框而不是 _hidden_，例如：<input type="text" autofocus />。 - Kamil Szymański

我还遇到了另一个Chrome的问题，它第一次可以正常工作，但是当我关闭对话框并重新打开它时，它会忽略它。 - Ayyash

谢谢伙计。你救了我的一天。 - dhruv jadia

Answer 2

在页面上将此标签作为第一个输入字段添加可以让我使用。

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

如果您想使用 Tab 键在字段之间进行移动，无需使用 JavaScript 并保持选项卡顺序。

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

- Miguel

---

太好了，你节省了时间。 - Vinay Kaithwas

Answer 3

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

- Jérôme Verstrynge

---

导航表单通过选项卡的本意被破坏了。 - Pankaj Phartiyal

这会破坏辅助功能，不是一个可行的权衡。 - davidgoli

这个答案就好像在说“根本不要显示你的弹出窗口”一样好。 - Antoniossss

我同意，这并不是最适合无障碍性的解决方案。但在我的情况下，这是最好的（也是正确的）解决方案，因为我知道我的网站只会在触摸设备上使用，所以我可以忽略与键盘相关的导航。 - Dominik Ehrenberg

Answer 4

我最终做了这个：

我最终做了这个：

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

- Robert

---

将此作为第一个字段对我有效，它不会在其他真实字段上触发模糊。 - Ayyash

Answer 5

在我的情况下，使用 display: none 或 type=hidden 的解决方案并没有帮助。您可以使用

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

作为第一个输入。

- emp

Answer 6

将tabindex = 0设置在form上。这将解决您的问题，并且在可访问性方面应该是可以接受的。

- Neil Girardi

Answer 7

你可以使用 jQuery：

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

如果您发现很难追踪为什么自动对焦设置在表单的第一个输入字段上，请确保在文档的闭合</body> body标记之前插入此代码。

- Felix Jr

---

这种方法的问题在于，如果您为输入框上的onblur事件监听器（即，在元素失去焦点时执行自动搜索）存在问题。 - Gonçalo Vieira

Answer 8

我在我的Laravel + Bootstrap设置中使用以下代码解决了这个问题：

{{ Form::text(null, null, ['class' => 'd-none', 'autofocus']) }}

- Nightcrawler

Answer 9

这对我有效。

<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=".">

- Mohamad Hamouday

Answer 10

没有使用JQuery和JavaScript，我们可以提供一个仅基于CSS的解决方案。

1. 去除所有焦点的轮廓线

   :focus {
       outline: 0;
   }
   

2. 添加新的焦点轮廓线

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

- Ortsbo

---

虽然这样做似乎解决了问题，但它会引起更多的无障碍性问题 :) http://www.outlinenone.com/ - mikestreety