390

我有一个带有文本框的网络表单。默认情况下，如何将焦点设置到文本框？

像这样的东西：

<body onload='setFocusToTextBox()'>

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

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

12 回答 12

660

做这个。

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

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

你的脚本是

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
于 2013-07-06T07:21:02.943 回答
172

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

<input name="myinput" value="whatever" autofocus />
于 2013-07-06T07:30:03.480 回答
76

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

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

检查它是否有帮助。

于 2013-07-06T07:25:28.073 回答
35

如果您的代码是：

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

如果您使用的是 JQuery，您也可以使用它：

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

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

于 2015-03-10T18:32:17.757 回答
22

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

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};
于 2013-07-06T07:21:42.060 回答
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 中的 autofocus 属性。

请注意：我想更新这个旧线程，显示所询问的示例，以及为仍在阅读本文的人提供更新、更容易的更新。;)

于 2016-07-08T02:10:07.230 回答
2

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

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

setFocusToTextBox( 0 );
// sets focus on first element of the form
于 2014-12-22T15:22:28.480 回答
2

window.onload 是最初将焦点放在onblur 是在您单击文本区域外部时放置焦点，或避免文本区域模糊

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

    </script>
于 2019-06-11T02:49:59.837 回答
1

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

mytext.focus();


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

于 2019-04-09T06:26:28.357 回答
0

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

于 2022-03-04T17:09:19.410 回答
0

尝试这个：

$('.modal').on('shown.bs.modal', function () {
        setTimeout(function() {
                $("input#yourFieldId").addClass('modal-primary-focus').focus();
            },
            500);
    });
于 2022-01-11T13:13:04.860 回答
0

这个例子对我有用

$(document).ready(function () {
document.getElementById('TextBox').focus();
}
于 2022-02-21T11:13:58.933 回答