使用 jquery 聚焦表单中的第一个控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/267615/
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
Focusing first control in the form using jquery
提问by Zakaria
Using jquery how do I focus the first element (edit field, text area, dropdown field, etc) in the form when the page load?
使用 jquery 如何在页面加载时聚焦表单中的第一个元素（编辑字段、文本区域、下拉字段等）？
Something like:
就像是：
document.forms[0].elements[0].focus();
but using jquery.
但使用jquery。
Another requirement, don't focus the first element when the form has class="filter".
另一个要求，当表单有 class="filter" 时不要聚焦第一个元素。
采纳答案by Zakaria
For the background I used the script in ruby on railsapp. After trying all your answer and found out they all doesn't works, With a search on google i found this snippet that works:
对于背景，我在ruby on rails应用程序中使用了脚本。在尝试了所有答案并发现它们都不起作用后，通过在 google 上搜索，我发现此代码段有效：
$(function() {
$("form:not(.filter) :input:visible:enabled:first").focus();
});
It turn out $('form :input:first')match the hidden input that railsinsert on every form.
结果$('form :input:first')匹配rails在每个表单上插入的隐藏输入。
回答by nickf
$('form:not(.filter) :input:visible:enabled:first').focus()
This will select the first visible input element (<input />, <select>, <textarea>) that doesn't have the class filterin it.
这将选择其中没有该类的第一个可见输入元素 ( <input />, <select>, <textarea>) filter。
回答by tvanfosson
I like to mark my chosen element with a class and select by class rather than leaving it up to the order of the elements on the page. I find this much easier than trying to remember to update my "what's the real first element" algorithm when selecting elements that may or may not be hidden, may or may not be injected by the framework, ...
我喜欢用一个类标记我选择的元素并按类进行选择，而不是将它留给页面上元素的顺序。我发现这比尝试记住更新我的“真正的第一个元素是什么”算法要容易得多，在选择可能隐藏或可能不隐藏的元素时，可能会或可能不会被框架注入，......
$(document).ready( function() {
$('input.js-initial-focus:first').focus(); // choose first just in case
});
回答by stun
This is not a one line solution, but it takes into consideration of the realfirst user input field (may it be <input /> or <select> tag).
这不是单行解决方案，但它考虑了真正的第一个用户输入字段（可能是 <input /> 或 <select> 标签）。
You just have to tweak this a bit more and you get what you need.
你只需要稍微调整一下，你就会得到你需要的东西。
P.S: I have tested this code works in FireFox, Chrome, and IE6.
PS：我已经测试过这段代码在 FireFox、Chrome 和 IE6 中都有效。
function focusFirstFormField() {
try {
var selector = $("#formid");
if (selector.length >= 1 && selector[0] && selector[0].elements && selector[0].elements.length > 0) {
var elements = selector[0].elements;
var length = elements.length;
for (var i = 0; i < length; i++) {
var elem = elements[i];
var type = elem.type;
// ignore images, hidden fields, buttons, and submit-buttons
if (elem.style.display != "none" /* check for visible */ && type != "image" && type != "hidden" && type != "button" && type != "submit") {
elem.focus();
break;
}
}
}
}
catch(err) { /* ignore error if any */ }
}
回答by Avinash Saini
$("form").find('input[type=text],textarea,select').filter(':visible:first').focus();
回答by George
I had some problems with jQuery dialogs which were invisible on the page but were still selected by the selector:
我在页面上不可见但仍被选择器选中的 jQuery 对话框中遇到了一些问题：
$(":text:visible:enabled:first").focus();
After alot of playing around I finally came up with a solution that excluded all inputs in divs with a class of .dialog by adding a ".not() on the end. This may be useful to somebody else. This is my selector:
经过大量玩耍后，我终于想出了一个解决方案，通过在末尾添加“.not()”来排除具有 .dialog 类的 div 中的所有输入。这可能对其他人有用。这是我的选择器：
$(":text:visible:enabled:first").not("div .dialog input").focus();
