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

Posted 2023-02-19

【中文标题】如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素？

【英文标题】：How do I set the focus to the first input element in an HTML form independent from the id?

【发布时间】：2010-09-21 14:38:02

【问题描述】：

有没有一种简单的方法可以在加载时设置网页的焦点（输入光标）第一个输入元素（文本框、下拉列表...）页面无需知道元素的id？

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

【问题讨论】：

REMARK 如果表单被放置在页面中，用户必须向下滚动页面才能看到表单，通过设置焦点将自动向下滚动页面，就像锚一样。这不是很好，因为进入此类页面的用户会看到它立即向下滚动到表单位置。我在 Safari 和 FF 上测试过（IE7 不执行页面滚动）。

@Marco_Demaio 我的网络应用程序的结构方式是，每个页面的输入框都位于窗口顶部附近。

如果用户将浏览器窗口高度调整为小于 768 像素会怎样。页面将滚动到您设置焦点的位置。无论如何我只是想警告你，以防你不知道这样的小问题，在做一些测试之前我也不知道。

【参考方案1】：

这里有一篇文章可能有用：Set Focus to First Input on Web Page

【参考方案2】：

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

这可以使用循环来细化，例如。不关注某些类型的字段，禁用字段等。最好将 class="autofocus" 添加到您实际上确实想要聚焦的字段，然后循环遍历 forms[i].elements[j] 以查找该类名。

无论如何：在每个页面上都这样做通常不是一个好主意。当您关注输入时，用户将失去例如。从键盘滚动页面。如果出乎意料，这可能会很烦人，因此只有在您非常确定使用表单字段将成为用户想要做的事情时才自动聚焦。 IE。如果您是 Google。

【讨论】：

应该是正确答案，因为问题没有jquery标签。

@KalleH.Väravas 不，它应该被否决，因为它做出的假设在问题中无处可寻，例如。至少有一种形式。一般来说，它不起作用。

【参考方案3】：

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

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

【讨论】：

我可能错了，但如果 forms[0] 没有隐藏输入，则此循环没有定义的行为。

没错。它用于跳过任何领先的隐藏输入。它是在假设表单中有非隐藏字段的情况下编写的。我也可以用 jQuery 来完成（我会发布另一个答案），但你没有提到你想要 jQuery 参与。

@MarkoDumic 如果可以使用while 语句，为什么还要浪费内存？

【参考方案4】：

如果您使用的是Prototype javascript 框架，那么您可以使用focusFirstElement 方法：

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

【参考方案5】：

将此代码放在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>

【讨论】：

这里要考虑的一件事是它可能匹配本身不是隐藏但祖先是隐藏的元素。这将需要跟踪 DOM 并测试每个祖先的可见性，我认为这对于这种情况来说是严重的过度杀伤。

怎么样 我认为您应该在代码中添加这样的案例。通常人们不希望专注于只读输入文本字段。无论如何，不​​错的代码和 +1 谢谢！

未经测试，但我用 !forms[i][j].readonly != undefined

更新了它

【参考方案6】：

您也可以尝试基于 jQuery 的方法：

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

【讨论】：

它有效！我开始将 jQuery 集成到我的 Web 应用程序中。所以，我想我会坚持这种方法！非常感谢，马尔科！

在这种情况下，如果页面上的第一个表单被隐藏会怎样？或者如果表单上的第一个元素通过 CSS 隐藏？这肯定会失败。我当然是迂腐的，但这就是我滚动的方式。

就我而言（使用 ASP.NET），我只有一个永远不会隐藏的表单。所以这对我有用。

@Jame Hughes，你可以把它写成一个函数，在你需要的时候调用它，你可以做例外。对我来说，这个解决方案真的很有帮助。

由于某种原因，这对我不起作用。我不应该看到光标吗？

【参考方案7】：

我发现最全面的 jQuery 表达式是（通过here 的帮助）

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

【讨论】：

我正在使用它，注意到当表格中有大量 >1000 个复选框时，它在 IE 上运行非常缓慢。不知道该怎么办，可能不得不放弃关注第一个输入字段。

【参考方案8】：

虽然这不能回答问题（需要一个通用脚本），但我认为知道 html5 引入了“自动对焦”属性可能对其他人有用：

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

Dive in to HTML5 有更多信息。

【讨论】：

autofocus 是属性名。它的价值如何？不需要像 autofocus=true 这样的东西？不设置任何值是什么意思？

在 HTML5 中，某些属性不需要有值，'checked' 是另一个属性，就是这种情况。我相信，当该值被忽略时，暗示它与名称相同（例如 autofocus="autofocus" 和 checked="checked"）。

当我尝试使用 autofocus 而 spring:form 没有任何价值时，我的 Spring 应用程序中断。不过，autofocus="autofocus" 工作正常。谢谢，@Jacob。

@Geek 自动对焦属性和其他许多属性一样，是一个布尔属性类型。这就是为什么它仅以声明方式使用，而不是通过为其分配值。在 w3c 规范中查看更多详细信息：w3.org/TR/html5/infrastructure.html#boolean-attribute

请注意，这似乎不适用于最初隐藏的输入，例如在引导弹出模式中，因为该属性是在元素插入 DOM 时处理的，此时它仍然是隐藏的，因此不可聚焦。见this answer

【参考方案9】：

这将获取所有可见公共输入中的第一个，包括文本区域和选择框。这也确保它们没有被隐藏、禁用或只读。它还允许一个目标 div，我在我的软件中使用它（即，此表单内的第一个输入）。

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();

【参考方案10】：

尝试了上面的很多答案，但它们都不起作用。在以下位置找到这个：http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 谢谢科洛德沃尔。

$("input:text:visible:first").focus();

【参考方案11】：

我正在使用这个：

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();

【参考方案12】：

AngularJS：

angular.element('#Element')[0].focus();

【参考方案13】：

这包括文本区域，不包括单选按钮

$(document).ready(function() 
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined) first_input.focus(); 
);

【参考方案14】：

对于那些使用 JSF2.2+ 并且不能将 autofocus 作为没有值的属性传递给它的人，使用这个：

 p:autofocus="true"

并将其添加到命名空间 p（也经常使用 pt。随你喜欢）。

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">

【参考方案15】：

您应该能够使用 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;
                
            
        
       

【参考方案16】：

没有第三方库，使用类似的东西

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) 
    inputChilds.item(0).focus();
  

确保您考虑所有表单元素标签，排除隐藏/禁用的标签，如其他答案等......

【参考方案17】：

没有 jquery，例如使用常规 javascript：

document.querySelector('form input:not([type=hidden])').focus()

适用于 Safari，但不适用于 Chrome 75（2019 年 4 月）

【参考方案18】：

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

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

【讨论】：

很好的解决方案 - 这样，标记仍然在控制之中。