如何使用 JavaScript 将焦点设置在 HTML 表单中的元素上？
Posted
技术标签:
【中文标题】如何使用 JavaScript 将焦点设置在 HTML 表单中的元素上？【英文标题】：How can I set focus on an element in an HTML form using JavaScript? 【发布时间】：2013-07-04 06:06:38 【问题描述】：我有一个带有文本框的网络表单。默认情况下如何将焦点设置到文本框？
类似这样的：
<body onload='setFocusToTextBox()'>
所以有人可以帮我吗？我不知道如何使用 javascript 将焦点设置到文本框。
<script>
function setFocusToTextBox()
//What to do here
</script>
【问题讨论】：
就像document.getElementById('your_text_box_id').focus();一样简单。
【参考方案1】：
不管怎样，您可以在兼容 html5 的浏览器上使用 the autofocus attribute。从版本 10 开始，甚至可以在 IE 上运行。
<input name="myinput" value="whatever" autofocus />
【讨论】：
请记住，这仅适用于页面首次加载时设置焦点；它不能用于稍后设置焦点以响应输入。 如果 ios Safari (caniuse.com/#search=autofocus) 恐怕 autofocus 属性不兼容，而 .focus() 只是与 Opera Mini (caniuse.com/#search=focus) 不兼容 请注意，如果您试图从控制台集中注意力，那么这是不可能的！ 在使用带有autofocus 的输入的innerHTML 时也可以使用。【参考方案2】：
window.onload 最初是把焦点放在 onblur 是在您单击文本区域外部时聚焦，或避免文本区域 模糊
<textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
mytexarea.focus();
</script>
【讨论】：
【参考方案3】：如果您的<input> 或<textarea> 具有id=mytext 属性，则使用
mytext.focus();
function setFocusToTextBox()
mytext.focus();
<body onload='setFocusToTextBox()'>
<form>
<input type="text" id="mytext"/>
</form>
</body>【讨论】：
【参考方案4】：如果您的代码是：
<input type="text" id="mytext"/>
如果你使用的是 JQuery，你也可以使用这个：
<script>
function setFocusToTextBox()
$("#mytext").focus();
</script>
请记住，您必须先绘制输入$(document).ready()
【讨论】：
我对此投了反对票，因为在基本问题中根本没有 jQuery 的含义。 OP 希望保持纯粹的 javascript 好吧，你有理由，我错了，但我认为它还是有帮助的。 我赞成这一点，因为在已经使用 jQuery 并且将元素作为 jQuery 选择对象的项目中，最好是一致而不是使用 vanilla JS。 @Fallenreaper Downvotes 是针对egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect，根据*** 的帮助中心。我发现这与这些类别相去甚远。帮助不限于OP，是吗？
@GellieAnn 虽然这是一个答案，但它超出了 OPs 问题的范围。他使用 vanilla javascript 是有原因的，虽然您可以提及其他框架并给出指向或提示的提示并给出原因，但您仍然应该在所问问题的范围内解决答案。因此，我支持我的反对票。【参考方案5】：
我以前只用这个：
<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 属性。
请注意：我想更新这个旧线程，显示所询问的示例，以及为仍在阅读本文的人提供更新、更容易的更新。 ;)
【讨论】：
【参考方案6】：如前所述，document.forms 也可以。
function setFocusToTextBox( _element )
document.forms[ 'myFormName' ].elements[ _element ].focus();
setFocusToTextBox( 0 );
// sets focus on first element of the form
【讨论】：
AFAIK 表单没有“名称”属性 表单拥有“名称”已经有很长时间了，在 HTML5 中，它们仍然如此。见w3.org/TR/html5/forms.html#the-form-element【参考方案7】：通常当我们关注文本框时，我们也应该滚动到视图中
function setFocusToTextBox()
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
检查是否有帮助。
【讨论】：
如果字段不在屏幕上，这在较小的屏幕上可能会让人头疼:-) 如果你有一个固定的标题栏，你可能需要使用 textbox.scrollIntoView(false) 这只是将元素设置到底部而不是顶部。 这是更复杂页面的正确答案。【参考方案8】：对于纯 Javascript，请尝试以下操作：
window.onload = function()
document.getElementById("TextBoxName").focus();
;
【讨论】：
【参考方案9】：这样做。
如果你的元素是这样的..
<input type="text" id="mytext"/>
你的脚本是
<script>
function setFocusToTextBox()
document.getElementById("mytext").focus();
</script>
【讨论】：
您必须使用 Web API 的其他部分（例如Document.forms、Document.getelementsByTagName 或 Node.childNodes）扫描文档，并且依赖已知的文档结构或查找某些元素特定属性。
或者显而易见的答案...给它一个 ID ;)
我建议不要使用 ID，因为它被过度指定了。而是使用名称甚至类。在这种情况下，您将使用 document.querySelector("[name='myText']") 或 document.querySelector(".myText") 来获取对输入元素的引用。
@ChrisLove 有趣的建议。为什么有一个 id 被“过度指定”，它到底有什么问题？它更简单，更精确，定位它的代码会稍微快一点，有一个 ID。对我来说，这听起来是最明显和最明智的做法——如果可能的话。
@ChrisLove 这不是过度指定 CSS 选择器，而是设置 HTML ID 属性 - 特异性是 CSS 处理解析 DOM 选择器的方式的问题，而不是 ID 和类属性的问题在 HTML 中工作。不建议使用与附加 JS 相同的 DOM 选择器来附加 CSS，这意味着您可以保持您描述的差异以上是关于如何使用 JavaScript 将焦点设置在 HTML 表单中的元素上？的主要内容，如果未能解决你的问题，请参考以下文章
将键盘选项卡焦点设置到页面顶部/使用 JavaScript / jQuery 重置键盘焦点