有没有一种简单的方法可以在加载页面时将网页的焦点（输入光标）设置在第一个输入元素（文本框、下拉列表...）上，而无需知道元素的 id？
我想将它实现为我的 Web 应用程序的所有页面/表单的通用脚本。
splattne
问问题
189289 次
18 回答
149
虽然这不能回答问题（需要一个通用脚本），但我认为其他人知道 HTML5 引入了“自动对焦”属性可能会很有用：
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
深入了解HTML5有更多信息。
于 2011-06-22T20:49:01.947 回答
102
您还可以尝试基于 jQuery 的方法：
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
于 2008-11-10T21:01:23.407 回答
39
document.forms[0].elements[0].focus();
这可以使用循环来细化，例如。不关注某些类型的字段，禁用字段等。更好的做法是在您确实想要聚焦的字段中添加一个 class="autofocus" ，然后遍历 forms[i].elements[j] 以查找该类名。
无论如何：在每个页面上都这样做通常不是一个好主意。当您关注输入时，用户将失去例如。从键盘滚动页面。如果出乎意料，这可能会很烦人，因此只有在您非常确定使用表单字段将成为用户想要做的事情时才自动聚焦。IE。如果你是谷歌。
于 2008-11-10T10:36:45.507 回答
19
我发现最全面的 jQuery 表达式是（通过这里的帮助）
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
于 2010-04-30T13:33:06.917 回答
7
如果您使用的是Prototype JavaScript 框架，那么您可以使用focusFirstElement方法：
Form.focusFirstElement(document.forms[0]);
于 2008-11-10T11:14:38.613 回答
6
这里有一篇文章可能有用：将焦点设置为网页上的第一个输入
于 2008-11-10T10:34:10.940 回答
5
您还需要跳过任何隐藏的输入。
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
于 2008-11-10T11:01:23.787 回答
4
我正在使用这个：
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
于 2013-08-21T03:16:53.790 回答
4
我需要为在我页面上的模态 div 中动态显示的表单解决这个问题，不幸autofocus的是，当通过更改display属性（至少在 Chrome 中没有）显示包含 div 时，它不被尊重。我不喜欢任何需要我的代码来推断我应该将焦点设置到哪个控件的解决方案，因为隐藏或零大小输入的复杂性等。我的解决方案是autofocus无论如何都要在我的输入上设置属性，然后在我显示 div 时在我的代码中设置焦点：
form.querySelector('*[autofocus]').focus();
于 2021-01-28T11:54:43.107 回答
3
将此代码放在body标签的末尾将自动将第一个可见的、非隐藏的启用元素聚焦在屏幕上。它将处理我能在短时间内提出的大多数情况。
<script>
(function(){
var forms = document.forms || [];
for(var i = 0; i < forms.length; i++){
for(var j = 0; j < forms[i].length; j++){
if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
forms[i][j].focus();
return;
}
}
}
})();
</script>
于 2008-11-10T12:58:41.303 回答
3
尝试了上面的很多答案，但它们都不起作用。在以下位置找到这个：http ://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 谢谢 Kolodvor。
$("input:text:visible:first").focus();
于 2013-01-25T04:43:26.230 回答
2
这将获得任何可见公共输入中的第一个，包括文本区域和选择框。这也确保它们没有被隐藏、禁用或只读。它还允许一个目标 div，我在我的软件中使用它（即，此表单内的第一个输入）。
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
于 2012-10-23T02:25:21.043 回答
1
对于那些使用 JSF2.2+ 并且不能将 autofocus 作为没有值的属性传递给它的人，使用这个：
p:autofocus="true"
并将其添加到命名空间 p 中（也经常使用 pt。随你喜欢）。
<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
于 2014-10-20T06:28:33.883 回答
1
没有 jquery，例如使用常规 javascript：
document.querySelector('form input:not([type=hidden])').focus()
适用于 Safari 但不适用于 Chrome 75（2019 年 4 月）
于 2019-04-19T12:28:19.210 回答
0
与AngularJS：
angular.element('#Element')[0].focus();
于 2014-05-08T12:02:54.090 回答
0
这包括 textareas 并且不包括单选按钮
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
于 2014-06-02T11:30:51.057 回答
0
您应该能够使用 clientHeight 而不是检查 display 属性，因为父级可能隐藏此元素：
function setFocus() {
var forms = document.forms || [];
for (var i = 0; i < forms.length; i++) {
for (var j = 0; j < forms[i].length; j++) {
var widget = forms[i][j];
if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
&& (typeof widget.disabled === "undefined" || widget.disabled === false)
&& (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
widget.focus();
break;
}
}
}
}
}
于 2017-12-06T15:19:46.273 回答
0
没有第三方库，使用类似
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
确保您考虑所有表单元素标签，排除隐藏/禁用的标签，如其他答案等等。
于 2019-02-18T17:25:15.830 回答