如何使用JavaScript将焦点放在HTML表单中的元素上？

我有一个带有文本框的Web表单。如何默认将焦点设置为文本框？
是这样的：

<body onload='setFocusToTextBox()'>

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

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

就像document.getElementById（'your_text_box_id'）。focus（）;一样简单。

#1 楼

执行此操作。

如果您的元素是这样的..

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

您的脚本将是

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

您必须使用Web API的其他部分（例如Document.forms，Document.getelementsByTagName或Node.childNodes）来扫描文档，并依赖于已知的文档结构或寻找某些元素特定的属性。

–彼得
2014年6月16日10:03

或明显的答案...给它一个ID;）

–相关
2014年8月27日在22:52

我建议不要使用ID，因为它已被过度指定。而是使用名称甚至是类。在那种情况下，您将使用document.querySelector（“ [name ='myText']”）或document.querySelector（“。myText”）获得对输入元素的引用。

–克里斯·洛夫（Chris Love）
15年11月23日在19:18

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

– PandaWood
16年4月4日，0：59

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

–托尼·利（Toni Leigh）
17年3月21日在13:25

#2 楼

对于它的价值，可以在兼容HTML5的浏览器上使用autofocus属性。即使在版本10的IE上也可以使用。

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

请记住，这仅在页面首次加载时用于设置焦点；以后不能根据输入来设置焦点。

–马丁·卡尼（Martin Carney）
2014年9月26日下午16:44

恐怕如果IOS Safari（caniuse.com/#search=autofocus）时autofocus属性不兼容，而.focus（）与Opera Mini（caniuse.com/#search=focus）不兼容

–lfrodrigues
17年5月22日在21:07

请注意，如果您试图从控制台集中精力，那是不可能的！

–或Choban
19年4月4日在9:03

#3 楼

通常，当我们关注文本框时，还应该滚动到视图中。

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

检查是否有帮助。

如果该字段不在屏幕上，这可能会在较小的屏幕上令人头疼：:)

–托尼·利（Toni Leigh）
17年3月21日在13:26

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

–DeadlyChambers
17年11月28日在16:43

#4 楼

如果您的代码是：

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

并且如果您使用的是JQuery，则也可以使用此代码：

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

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

我对此表示反对，因为基本问题中几乎没有jQuery的含义。 OP希望保留纯JavaScript

–堕落者
2015年6月2日19:59

好吧，你有理由，我错了，但是我认为还是有帮助的。

–Richard Rebeco
15年6月19日在13:35

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

–天堂
16年6月14日在6:56

@stackoverflow的帮助中心表示，@ Fallenreaper Downvotes用于草率的，不费力的帖子，或者答案是明显的，甚至可能是危险的错误答案。我发现这些类别附近无处可寻。帮助不仅限于OP，是吗？

–Gellie Ann
17-10-18在2:30

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

–堕落者
17-10-18在16:27

#5 楼

对于纯Javascript，请尝试以下操作：

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

#6 楼

我以前只是用这个：

<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属性。

请注意：我想要更新此旧线程，以显示所询问的示例以及对于仍在阅读本文的用户的更新，更轻松的更新。 ;）

#7 楼

如前所述，document.forms也适用。

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

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

AFAIK表单没有“名称”属性

– Marecky
2015年10月7日，0：54

表单已经有很长时间了，在HTML5中，它们仍然存在。参见w3.org/TR/html5/forms.html#the-form-element

– Mac
2015年11月3日，2：39

#8 楼

如果您的<input>或<textarea>具有属性id=mytext，请使用

mytext.focus();

 function setFocusToTextBox() {
    mytext.focus();
}

 <body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>

#9 楼

window.onload最初是要聚焦的焦点
onblur是在单击文本区域之外时要聚焦的焦点，或者避开文本区域

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>

编程黑洞网