如何将焦点设置为独立于id的HTML表单中的第一个输入元素？

Question

有没有一种简单的方法在加载页面时在第一个输入元素(文本框,下拉列表,...)上设置网页的焦点(输入光标)而不必知道元素的ID？

我想将它作为我的Web应用程序的所有页面/表单的通用脚本实现.

Answer 1

虽然这不回答问题(需要一个通用脚本),但我知道HTML5引入'autofocus'属性可能对其他人有用:

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

深入了解HTML5有更多信息.

Answer 2

您还可以尝试基于jQuery的方法:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

Answer 3

document.forms[0].elements[0].focus();

这可以使用循环来改进,例如.不关注某些类型的字段,禁用字段等.更可能是一类="自动对焦"添加到你实际现场做了形式要突出重点,循环[I] .elements [J]寻找那类名.

无论如何:在每个页面上执行此操作通常不是一个好主意.当您关注输入时,用户失去了例如.从键盘滚动页面.如果出乎意料,这可能很烦人,因此只有在您确定使用表单字段将成为用户想要做的事情时才会自动对焦.即.如果你是谷歌

Answer 4

我发现最全面的jQuery表达式是(通过这里的帮助)

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});

Answer 5

我需要为在我的页面上的模态 div 中动态显示的表单解决这个问题，不幸的是，autofocus当通过更改属性显示包含的 div 时，我无法解决这个问题display（至少在 Chrome 中不是这样）。我不喜欢任何需要我的代码来推断我应该将焦点设置为哪个控件的解决方案，因为隐藏或零大小的输入等很复杂。我的解决方案是无论如何在我的输入上设置属性autofocus，然后在显示 div 时在代码中设置焦点：

form.querySelector('*[autofocus]').focus();

Answer 6

如果您正在使用Prototype JavaScript框架,那么您可以使用focusFirstElement方法:

Form.focusFirstElement(document.forms[0]);

Answer 7

这里有一篇可能有用的文章:将焦点设置为网页上的第一个输入

Answer 8

您还需要跳过任何隐藏的输入.

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();