将 HTML 表单作为 JQuery 对话框弹出时，如何避免自动关注第一个输入字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7827004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to avoid automatic focus on first input field when popping a HTML form as a JQuery dialog?
提问by Jér?me Verstrynge
I have seen similar questions on SO, including this one, which is old. I read and followed links, but it is unclear whether there is a proper solution to this issue today.
我在 SO 上看到过类似的问题，包括这个很旧的问题。我阅读并关注了链接，但目前尚不清楚今天是否有针对此问题的适当解决方案。
My bottom issue is that I am using HTML's placeholder="..."on the input fields. By focusing automatically on the first field, its placeholder is not visible to the user anymore.
我最根本的问题是我placeholder="..."在输入字段上使用 HTML 。通过自动聚焦在第一个字段上，它的占位符不再对用户可见。
EDIT
编辑
Here is my HTML code:
这是我的 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>
Here is my JS code:
这是我的 JS 代码：
$("#login").click(function() {
$("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
] });
});
采纳答案by Jér?me Verstrynge
A solution is to set tabindex="-1"on ALLinput fields to keep HTML placeholders visible.
一种解决方案是一套tabindex="-1"对所有输入字段保持HTML占位符可见。
回答by Tyler Richardson
What I did was I created an extra input and made it invisible (style="display:none") then gave it the property autofocus="true"put this at the end of your dialog content so it wont mess with anything. it should look like this:
我所做的是我创建了一个额外的输入并使其不可见 ( style="display:none") 然后给它属性autofocus="true"将它放在对话框内容的末尾，这样它就不会弄乱任何东西。它应该是这样的：
<div><!--dialog div-->
<button></button>
<button></button>
<input type="hidden" autofocus="true" />
</div>
回答by Mike
Adding this tag as the first input field on the page works for me.
添加此标签作为页面上的第一个输入字段对我有用。
<input type="text" autofocus="autofocus" style="display:none" />
No need for javascript and keeps the tab order if you want to use the tab key to move through the fields.
如果您想使用 Tab 键在字段中移动，则不需要 javascript 并保持 Tab 键顺序。
(Tested on Chrome > 65, Firefox > 59 and Edge)
（在 Chrome > 65、Firefox > 59 和 Edge 上测试）
回答by Robert
I ended up doing this:
我最终这样做了：
<input type="text" style="position: fixed; left: -10000000px;" disabled/>
回答by Felix Jr
You can use jquery:
您可以使用 jquery：
jQuery(document).ready(function(e) {
$('input[name="login_id"]').blur();
});
This if you find it hard to trace the bug why autofocus is set into your first input field of the form. Make sure to insert this code before the closing </body>body tag of your document.
如果您发现很难追踪为什么将自动对焦设置到表单的第一个输入字段中的错误。确保</body>在文档的结束正文标记之前插入此代码。
回答by emp
In my case solution with display: none or type=hidden did not help. You can use
在我的情况下，带有 display: none 或 type=hidden 的解决方案没有帮助。您可以使用
<div style="max-width: 0; max-height: 0; overflow: hidden;">
<input autofocus="true" />
</div>
as first input.
作为第一个输入。
回答by Ortsbo
Without JQuery and JavaScript, we can give a CSS-only solution.
没有 JQuery 和 JavaScript，我们可以给出一个纯 CSS 的解决方案。
remove all focus's outline
:focus { outline: 0; }add the new focus's outline
:link:focus, :visited:focus { outline: none; }
删除所有焦点的轮廓
:focus { outline: 0; }添加新焦点的轮廓
:link:focus, :visited:focus { outline: none; }
