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

How can I set focus on an element in an HTML form using JavaScript?

本文关键字：表单 元素 HTML JavaScript 何使用 焦点 设置      更新时间：2023-09-26

我有一个web表单，里面有一个文本框。默认情况下，如何将焦点设置为文本框？

类似这样的东西：

<body onload='setFocusToTextBox()'>

有人能帮我吗？我不知道如何使用JavaScript将焦点设置为文本框。

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

执行此操作。

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

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

你的脚本将是

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

值得一提的是，您可以在兼容HTML5的浏览器上使用autofocus属性。甚至适用于版本10的IE。

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

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

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

检查它是否有帮助。

如果您的代码是：

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

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

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

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

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

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

我过去只使用这个：

<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>

也就是说，您可以在HTML5中使用autofocus属性。

请注意：我想更新这个旧的线程，显示所问的例子，并为那些仍在阅读本文的人提供更新、更容易的更新。）

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

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}
setFocusToTextBox( 0 );
// sets focus on first element of the form

window.onload最初将焦点放在onblur是在文本区域外单击时将焦点放在文本区域之外，或者避开文本区域模糊

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

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

mytext.focus();


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

这个例子适用于我的

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

想分享一些关于这个主题的边缘案例。如果您的内容正在重新加载（例如从API加载动态DOM结果，并将焦点设置在结果的第一项上），则添加属性自动聚焦将不是您的解决方案，它仅适用于第一次加载，第二次DOM更改将不起作用，但在静态DOM或单页加载中效果良好。如果您有动态组件加载数据，则simple.focus（）将失败，原因是在focus（）is或DOM尚未完成blur时触发对尚未创建的元素的聚焦。对于这种情况，期望添加延迟时间（setTimeout函数），以便为焦点应用于DOM中新建或重新创建的元素提供时间。我的情况是从API加载数据，并将注意力集中在第一个结果上。添加 var el = document.getElementById(focusId); el.focus();解决了这个问题，因此DOM在不添加延迟的情况下完成了模糊。

试试这个：

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

<input type="text" class="word"> //html code
let theinput = document.querySelector(".word"); //Get the input 
 theinput.focus(); // focus on input
相关文章：