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

Question

我有一个带有文本框的Web表单.如何默认将焦点设置到文本框？

这样的事情:

<body onload='setFocusToTextBox()'>

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

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

Answer 1

做这个.

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

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

你的脚本会是

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

或明显的答案......给它一个ID;) (38认同)
@ChrisLove有趣的建议.为什么id被"过度指定",究竟是什么问题呢？它更简单,更精确,定位它的代码会稍微快一点,带有ID.对我来说,这听起来是最明显和最明智的事情 - 如果有可能的话. (8认同)
我建议不要使用ID,因为它已经过度指定.而是使用名称甚至是类.在这种情况下,您将使用document.querySelector("[name ='myText']")或document.querySelector(".myText")来获取对input元素的引用. (4认同)
@ChrisLove这不是过度指定CSS选择器,而是设置HTML ID属性 - 特性是CSS处理解析DOM选择器的方式中的问题,而不是ID和ID属性在HTML中如何工作的问题.不建议使用相同的DOM选择器来附加CSS,就像连接JS一样,这意味着你可以保持你所描述的差异化 (4认同)
您必须使用Web API的其他部分扫描文档(例如[`Document.forms`](https://developer.mozilla.org/en-US/docs/Web/API/document.forms), [`Document.getelementsByTagName`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName)或[`Node.childNodes`](https://developer.mozilla.org /en-US/docs/Web/API/Node.childNodes))并依赖于已知的文档结构或查找某些元素特定的属性. (3认同)
请注意，在 Firefox 开发人员工具中进行测试可能似乎不起作用，因为开发人员工具可能会将焦点集中在其自身上。这并不意味着 element.focus() 不适用于 Firefox。 (2认同)

Answer 2

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

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

Answer 3

通常当我们关注文本框时,我们也应该滚动到视图中

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

检查它是否有帮助.

Answer 4

如果您的代码是:

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

如果您使用的是JQuery,您也可以使用它:

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

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

我贬低了这一点,因为在基本问题中远远没有jQuery的含义.OP希望保持纯粹的javascript (10认同)
嗯,你有理由,我错了,但我认为无论如何它都是有用的. (10认同)
根据stackoverflow的帮助中心的说法,@ Fallreaper Downvotes用于"非常草率,不费吹灰之力的帖子,或者一个明显且可能非常不正确的答案".我发现这些类别无处可去.帮助不仅限于OP,是吗？ (8认同)
我赞成这一点,因为在已经使用jQuery并且你的元素作为jQuery选择对象的项目中,最好是**一致**而不是使用vanilla JS. (4认同)
@Fallenreaper 这只是迂腐 (2认同)

Answer 5

对于普通的Javascript,请尝试以下操作:

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