我有一个带有文本框的网页表单。如何默认将焦点设置到文本框中？
类似这样：
<body onload='setFocusToTextBox()'>
有人可以帮我吗？我不知道如何使用JavaScript将焦点设置到文本框中。
<script>
function setFocusToTextBox(){
//What to do here
}
</script>
如何使用JavaScript在HTML表单中设置元素的焦点？
418
- tenstar
2
13个回答
687
请这样做。
如果您的元素是这样的...
<input type="text" id="mytext"/>
你的脚本将是：
<script>
function setFocusToTextBox(){
document.getElementById("mytext").focus();
}
</script>
- mohkhan
14
3您需要使用Web API的其他部分（例如
Document.forms、Document.getelementsByTagName或Node.childNodes）扫描文档，并依靠已知的文档结构或查找某些元素特定属性。 - peterph54或者显而易见的答案是...给它一个ID ;) - Relevant
5我建议不要使用 ID，因为它的指定过度。相反，请使用名称甚至是类。在这种情况下，您可以使用 document.querySelector("[name='myText']") 或 document.querySelector(".myText") 来获取对输入元素的引用。 - Chris Love
23@ChrisLove有趣的建议。为什么拥有一个id会被“过度指定”，这样做有什么问题？使用id更简单、更精确，查找代码速度也会稍微快一些。如果可以的话，对我来说这似乎是最明显和合理的做法。 - PandaWood
8@Chris，这并不是过度指定CSS选择器，而是设置HTML ID属性 - 专业性是CSS处理解析DOM选择器的问题，而不是ID和class属性在HTML中的工作方式的问题。不建议使用相同的DOM选择器来附加CSS和JS，这意味着您可以维护所描述的差异化。 - Toni Leigh
显示剩余9条评论
196
值得一提的是，在兼容HTML5的浏览器上，您可以使用 autofocus属性。自IE 10版本以来即可使用。
<input name="myinput" value="whatever" autofocus />
- a better oliver
5
74请注意，这只适用于页面首次加载时设置焦点；它不能用于在响应输入后设置焦点。 - Martin
1很抱歉，autofocus属性在IOS Safari上不兼容（https://caniuse.com/#search=autofocus），而.focus()则与Opera Mini不兼容（https://caniuse.com/#search=focus）。 - lfrodrigues
6请注意，如果您正在尝试从控制台进行聚焦，那么这是不可能的！ - Or Choban
当使用具有“autofocus”的输入并使用innerHTML时，它也可以工作。 - Jens Törnell
autofocus属性仅在初始DOM页面加载时起作用。不适用于DOM更改（例如：当您有组件刷新DOM并应用新的HTML时，自动对焦将不起作用）。它仅在动态内容中第一次启动时起作用。我的案例研究是在API响应的第一个结果上设置焦点，因此当用户单击下一个以加载更多结果时，自动对焦将不起作用。 - StefaDesign
81
通常，当我们聚焦于文本框时，也应该将其滚动到视图中。
function setFocusToTextBox(){
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
}
请检查是否有帮助。
- Khanh TO
3
3如果字段在屏幕外，这对小屏幕来说会是一个真正的头疼问题 :-) - Toni Leigh
1如果您有一个固定的标题栏，您可能需要使用textbox.scrollIntoView(false)。这只是将元素设置到底部而不是顶部。 - DeadlyChambers
这是更复杂页面的适当答案。 - Tanasos
41
如果你的代码是：
<input type="text" id="mytext"/>
如果你正在使用jQuery，你也可以使用这个：
<script>
function setFocusToTextBox(){
$("#mytext").focus();
}
</script>
请记住，您必须首先绘制输入$(document).ready()
- Richard Rebeco
8
16我对这个进行了负评，因为基本问题中没有远程涉及jQuery。原始提问者想要纯粹的JavaScript。 - Fallenreaper
15好的，你说得对，我错了，但我认为这仍然有帮助。 - Richard Rebeco
6我正在点赞这个，因为在已经使用jQuery的项目中，如果你的元素是jQuery选择对象，最好是保持一致性，而不是使用vanilla JS。 - paradite
17根据stackoverflow的帮助中心，点踩是用于“极其粗糙、没有付出努力的帖子，或者明显而且可能极具错误危险性的答案”。我认为这篇文章并不属于这些类别。帮助不应该仅限于楼主，对吧？ - Gellie Ann
2@Fallenreaper，那只是在吹毛求疵。 - user8104581
显示剩余3条评论
23
对于纯JavaScript，请尝试以下操作：
window.onload = function() {
document.getElementById("TextBoxName").focus();
};
- sipp
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中，您可以直接使用自动对焦属性。
请注意：我想更新这个旧的帖子，展示所需的示例以及更简单的更新，以供仍在阅读此内容的人参考。 ;)
- user6558655
2
如前所述，document.forms 也可以使用。
function setFocusToTextBox( _element ) {
document.forms[ 'myFormName' ].elements[ _element ].focus();
}
setFocusToTextBox( 0 );
// sets focus on first element of the form
- Mac
2
据我所知，表单没有“name”属性。 - Marecky
表单现在已经有了“名称”很长一段时间了，在HTML5中，它们仍然存在。请参见http://www.w3.org/TR/html5/forms.html#the-form-element - Mac
2
window.onload是用于最初将焦点放在页面上的
onblur是用于在单击文本区域外或取消文本区域模糊状态时放置焦点的
注：原回答翻译成中文为“最初的回答”。
<textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
{
mytexarea.focus();
}
</script>
- Balaji
1
如果你的
<input>或<textarea>有属性id=mytext，那么请使用：mytext.focus();
function setFocusToTextBox() {
mytext.focus();
}<body onload='setFocusToTextBox()'>
<form>
<input type="text" id="mytext"/>
</form>
</body>- Kamil Kiełczewski
1
这个例子对我有用
$(document).ready(function () {
document.getElementById('TextBox').focus();
}
- CenkerK
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
document.getElementById('your_text_box_id').focus();。 - Teemuautofocus通常就足够了。 - oligofren