JavaScript将焦点设置为HTML表单元素

JavaScript HTML

Jim小卤蛋

2020-03-24

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

像这样：

<body onload='setFocusToTextBox()'>

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

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

第3246篇《JavaScript将焦点设置为HTML表单元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
神奇村村 2020.03.24

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

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
宝儿猪猪 2020.03.24

做这个。

如果您的元素是这样的。

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

您的脚本是

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

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

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};
老丝阿飞 2020.03.24

我以前只是用这个：

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

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

泡芙 2020.03.24

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

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

检查是否有帮助。

达蒙 2020.03.24

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

<input name="myinput" value="whatever" autofocus />
古一 2020.03.24

如果您的代码是：

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

如果使用的是JQuery，则也可以使用此方法：

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android