如何使用JavaScript将焦点设置在HTML表单中的元素上?

我有一个网页表单的文本框。如何在默认情况下设置文本框的焦点?

就像这样:

<body onload='setFocusToTextBox()'>

有人能帮帮我吗?我不知道如何用JavaScript设置文本框的焦点。

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
986916 次浏览
小开
最佳答案

这样做。

如果你的元素是这样的…

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

你的剧本应该是

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

对于简单的Javascript，试试下面的代码:

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

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

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

检查一下是否有帮助。

小开

不管怎样，你可以在兼容HTML5的浏览器上使用autofocus属性。甚至可以在IE版本10上使用。

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

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

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


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

如果你的代码是:

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

如果你正在使用JQuery，你也可以使用这个:

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

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

小开

我以前经常用这个:

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

请注意:我想更新这个旧线程，显示所问的示例，以及更新的，更容易的更新，供那些仍然在读这篇文章的人使用。；）

小开

如果你的<input>或<textarea>有属性id=mytext，那么使用

mytext.focus();


function setFocusToTextBox() {
mytext.focus();
}
<body onload='setFocusToTextBox()'>
<form>
<input type="text" id="mytext"/>
</form>
</body>

小开
< p >窗口。Onload是最初放置焦点 Onblur是将焦点放在文本区域外，或避开文本区域 模糊< / p > 
    <textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
{
   

mytexarea.focus();
    

}
    



</script>
小开

试试这个:

$('.modal').on('shown.bs.modal', function () {
setTimeout(function() {
$("input#yourFieldId").addClass('modal-primary-focus').focus();
},
500);
});
小开

这个例子对我很有用

$(document).ready(function () {
document.getElementById('TextBox').focus();
}
小开

考虑分享这个主题的一些边缘情况。 如果你的内容是重新加载(例如动态DOM加载结果从API和设置重点在第一项结果)，添加属性自动对焦将不是你的解决方案，它只在第一次加载，第二次DOM更改将不起作用，但在静态DOM或单页加载良好。如果你有动态组件加载数据，简单的.focus ()将会失败，因为触发焦点到还没有创建的元素上，或者DOM还没有完成模糊。对于这种情况，我们期望添加延迟时间(setTimeout函数)，以给予焦点应用于DOM中新创建或重新创建的元素的时间。我的案例是从API加载数据，并集中在第一个结果。 添加 var el = document.getElementById(focusId); el.focus();解决了这个问题，所以DOM完成模糊而不添加延迟

小开 
<input type="text" class="word"> //html code


let theinput = document.querySelector(".word"); //Get the input
theinput.focus(); // focus on input

提交答案