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

Posted 2023-03-05

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

【英文标题】：How to avoid automatic focus on first input field when popping a HTML form as a JQuery dialog?

【发布时间】：2011-12-11 05:42:08

【问题描述】：

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

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

【问题讨论】：

您链接到的页面完美地回答了您的问题。

@mblase75 抱歉，但我看不到批准的答案（或其他人）如何解决这个问题（我是 JS 新手）。

使用 javascript 在第一个元素上添加模糊。 coding-issues.com/2016/03/…

【参考方案1】：

这对我有用。

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

【参考方案2】：

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

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

作为第一个输入。

【参考方案3】：

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

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

如果您想使用 tab 键在字段中移动，则无需 javascript 并保持 tab 顺序。

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

【讨论】：

太棒了，您可以节省时间。

【参考方案4】：

没有 JQuery 和 JavaScript，我们可以提供一个纯 CSS 的解决方案。

删除所有焦点的轮廓

:focus 
    outline: 0;

添加新焦点的轮廓

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

【讨论】：

虽然这将“出现”以解决问题，但它会产生更多可访问性问题 :) outlinenone.com

【参考方案5】：

你可以使用jquery：

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

如果您发现很难跟踪为什么将自动对焦设置到表单的第一个输入字段中的错误。确保在文档的结束 </body> 正文标记之前插入此代码。

【讨论】：

这种方法的问题是，如果您在输入上有一个 onblur 事件侦听器（即，在模糊元素时进行自动搜索）

【参考方案6】：

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

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

【讨论】：

我遵循了您的解决方案，但它有一个很大的缺点 - 如果您将 blur 事件绑定到表单上的第一个输入（之前已自动聚焦的那个）它将在页面加载后立即触发（尝试使用 alert() 或 console.log()）。为避免此类问题，请尝试使用 text 类型的输入而不是 hidden，即：<input type="text" autofocus />.

我也遇到了 Chrome 的另一个问题，它第一次工作，但是当我关闭对话框并重新打开它时，它会忽略它

谢谢哥们。你拯救了我的一天。

【参考方案7】：

我最终这样做了：

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

【讨论】：

将此作为第一个字段对我有用，它不会在其他真实字段上引发模糊

【参考方案8】：

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

【讨论】：

破坏了通过标签导航表单的目的

这会破坏可访问性。不是一个可行的权衡。

这个问题就像说“根本不显示你的弹出窗口”

非常感谢 :)