如何将焦点设置为独立于ID的HTML格式的第一个输入元素？

84

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

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

javascript  html  forms  focus 
— 喷溅
source
7
备注如果将表单放置在页面中的方式是用户必须向下滚动页面以查看表单，则通过设置焦点将自动像锚点一样向下滚动页面。这不是很好，因为进入该页面的用户会看到它立即向下滚动到表单位置。我在Safari和FF上进行了测试（IE7不执行页面滚动）。
— Marco Demaio 2010年
@Marco_Demaio我的Web应用程序的结构是，每个页面的输入框都位于窗口顶部附近。
— splattne 2010年
3
如果用户将浏览器窗口的高度调整为小于768px，该怎么办。页面将滚动到您设置焦点的位置。无论如何，我只想警告您，以防您不知道这样的小问题，在进行一些测试之前我也不知道。
— Marco Demaio 2010年

Answers:

96

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

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});
— 马可·杜米克（Marko Dumic）
source
有用！我开始将jQuery集成到我的Web应用程序中。因此，我想我会坚持使用这种方法！非常感谢，Marko！
— splattne
3
如果在这种情况下隐藏页面上的第一个表单，会发生什么？或者，如果表单上的第一个元素通过CSS隐藏了？这肯定会失败。我当然是在学脚，但这就是我的方式。
— 詹姆斯·休斯
就我而言（使用ASP.NET），我只有一种形式，它从未被隐藏。所以这对我有用。
— splattne
@Jame Hughes，您可以将其编写为函数，并在需要时调用它，并且可以设置异常。对我来说，这种解决方案确实有所帮助。
— 露西
由于某种原因，这对我不起作用。我不应该看到光标。
— 克里斯，
136

尽管这不能回答问题（需要通用脚本），但对于其他人来说HTML5引入了“ autofocus”属性可能对我很有用：

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

深入了解HTML5有更多信息。

— 雅各布·斯坦利
source
2
自动对焦是attributename。它的值如何呢？不需要像autofocus = true这样的Somethig吗？不设置任何值意味着什么？
— 极客
4
在HTML5中，某些属性不需要具有值，在这种情况下，“选中”是另一个属性。我相信，当该值保留时，它暗示它与名称相同（例如，autofocus =“ autofocus”和checked =“ checked”）。
— 2013年
当我尝试不使用autofocus值时，我的Spring应用程序中断spring:form。autofocus="autofocus"不过效果很好。谢谢，@雅各布。
— 谢尔盖·塔切诺夫
2
@Geek autofocus属性以及其他许多属性都是布尔属性类型。这就是为什么仅以声明方式使用它，而不是为其分配值的原因。请参阅w3c规范中的更多详细信息：w3.org/TR/html5/infrastructure.html#boolean-attribute
— n1kkou
34 
document.forms[0].elements[0].focus();

可以使用一个循环来精炼例如。不关注某些类型的字段，禁用的字段等。更可能是一类=“自动对焦”添加到你实际现场做了形式[I] .elements [J]寻找一个类名想集中和循环。

无论如何：在每个页面上这样做通常不是一个好主意。当您集中输入时，用户将失去例如的能力。从键盘上滚动页面。如果出乎意料，这可能会很烦人，因此只有在您确定使用表单字段将成为用户想要执行的操作时，才进行自动对焦。即。如果您是Google。

— 博宾斯
source
3
应该是正确的答案，因为问题没有jquery标签。
— Kalle H.Väravas'04
@KalleH.Väravas不，它应该被否决，因为它做出了无处可寻的假设，例如。至少有一种形式。通常，它不起作用。
— 9ilsdx 9rvj 0lo
18

我发现最有效的jQuery表达式是（通过over here的帮助）

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});
— 恩吉克
source
1
我正在使用它，注意到当表中有大量> 1000的复选框时，它在IE上的运行非常慢。不确定该怎么做，可能不得不放弃专注于第一个输入字段。
— Sam Watkins 2014年
5

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

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
— 马可·杜米克（Marko Dumic）
source
我可能是错的，但是如果Forms [0]没有隐藏的输入，则此循环没有定义的行为。
— xtofl
究竟。它用于跳过任何前导的隐藏输入。它是在假设表单中存在非隐藏字段的前提下编写的。我也可以用jQuery完成（我将发布另一个答案），但您没有提到要让jQuery参与其中。
— Marko Dumic
1
@MarkoDumic如果可以使用while语句，为什么要浪费内存？
— Lucio
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>
— 詹姆斯·休斯
source
1
这里要考虑的一件事是，它可能匹配的元素本身不是隐藏的，而是祖先隐藏的。那将需要跟踪DOM并测试每个祖先的可见性，我认为这种情况严重过头了。
— James Hughes
那么<input type =“ text” readonly =“ readonly”>呢，我认为您应该在代码中添加这种情况。通常，人们不希望专注于只读输入文本字段。无论如何，不​​错的代码，+ 1谢谢！
— Marco Demaio
未经测试，但我使用！forms [i] [j] .readonly！= undefined更新了
— James Hughes 2010年
3

我正在使用这个：

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
— 罗伯特·布鲁克
source
2

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

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();
— 戴夫·K
source
1

对于那些使用JSF2.2 +并且无法将自动对焦作为没有值传递给它的属性的用户，请使用以下命令：

 p:autofocus="true"

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

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
— 联邦
source
0

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

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});
— 赫克托·佩雷斯（HectorPerez）
source
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;
                }
            }
        }
    }   
}
— thecoolmacdude
source
0

没有第三方库，请使用类似

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

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

— 吉斯莱
source
0

没有jQuery的，例如与常规JavaScript：

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

可以在Safari上运行，但不能在Chrome 75上运行（2019年4月）

— 本地主机
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.