JavaScript将焦点设置为HTML表单元素


331

我有一个带有文本框的Web表单。默认情况下,如何将焦点设置到文本框?

像这样:

<body onload='setFocusToTextBox()'>

所以有人可以帮我吗?我不知道如何使用JavaScript将焦点设置到文本框。

<script>
function setFocusToTextBox(){
//What to do here
}
</script>

21
一样简单document.getElementById('your_text_box_id').focus();
Teemu

Answers:


575

做这个。

如果您的元素是这样的。

<input type="text" id="mytext"/>

您的脚本是

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>

3
您将不得不使用Web API的其他部分(例如或)来扫描文档Document.forms,并依赖于已知的文档结构或寻找某些元素特定的属性。Document.getelementsByTagNameNode.childNodes
彼得

40
或明显的答案...给它一个ID;)
相关的

4
我建议不要使用ID,因为它已被过度指定。而是使用名称或类。在那种情况下,您将使用document.querySelector(“ [name ='myText']”)或document.querySelector(“。myText”)获得对输入元素的引用。
克里斯·洛夫

12
@ChrisLove有趣的建议。为什么有一个ID被“过度指定”?它到底是什么问题?它更简单,更精确,使用ID进行定位的代码会稍快一些。对于我来说,这听起来似乎是最显而易见,最明智的事情-如果可能的话。
PandaWood '16

4
@ChrisLove,这并不是过度指定CSS选择器,而是设置HTML ID属性-特异性是CSS处理解析DOM选择器的方式的问题,而不是ID和类属性在HTML中的工作方式的问题。不建议使用相同的DOM选择器将CSS附加到其上,而将JS附加到它上,这意味着您可以保持所描述的差异
Toni Leigh

142

对于它的价值,您可以autofocus在HTML5兼容的浏览器上使用该属性。从版本10开始甚至可以在IE上使用。

<input name="myinput" value="whatever" autofocus />

51
请记住,这仅在页面首次加载时用于设置焦点;以后不能根据输入来设置焦点。
马丁·卡尼

我担心如果IOS Safari(caniuse.com/#search=autofocus)不能兼容autofocus属性,而.focus()与Opera Mini(caniuse.com/#search=focus)不兼容
lfrodrigues

3
请注意,如果您试图从控制台集中精力,那是不可能的!
或Choban

65

通常,当我们专注于文本框时,还应该滚动到视图中

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

检查是否有帮助。


2
如果该字段不在屏幕上,这可能会在较小的屏幕上令人头疼:-)
Toni Leigh

如果标题栏是固定的,则可能需要使用textbox.scrollIntoView(false),这只是将元素设置为底部而不是顶部。
DeadlyChambers

30

如果您的代码是:

<input type="text" id="mytext"/>

如果使用的是JQuery,则也可以使用此方法:

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

请记住,您必须先绘制输入 $(document).ready()


11
我对此表示反对,因为基本问题中几乎没有jQuery的含义。OP希望仅使用Javascript
Fallenreaper 2015年

11
好吧,你有理由,我错了,但是我仍然认为这是有帮助的。
理查德·雷贝科

4
我对此表示赞同,因为在已经使用jQuery并且您将元素作为jQuery选择对象的项目中,最好保持一致而不是使用普通JS。
天堂

8
egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect根据stackoverflow的帮助中心,@ Fallenreaper Downvotes用于。我发现这些类别附近无处可寻。帮助不仅限于OP,是吗?
Gellie Ann

@GellieAnn尽管是答案,但它不在OP问题的范围内。他使用香草javascript是有原因的,尽管您可以提及其他框架并提供指向该框架的指针或提示,并给出原因的理由,但您仍应从所提出问题的范围内解决问题。因此,我支持我的不赞成投票。
Fallenreaper

20

对于纯Javascript,请尝试以下操作:

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};

3

我以前只是用这个:

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

也就是说,您可以仅在HTML 5中使用autofocus属性。

请注意:我想更新此旧线程,以显示所询问的示例以及那些仍在阅读本文的人的新的,更容易的更新。;)


1

如前所述,document.forms也可以工作。

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form

AFAIK形式没有“name”属性
Marecky

表单已经有很长时间了,“名称”在HTML5中仍然存在。参见w3.org/TR/html5/forms.html#the-form-element
Mac上


0

window.onload最初是将焦点放在模糊上是在单击文本区域之外时将焦点放置,或避免文本区域模糊

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
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.