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

2020/10/02 14:21 · javascript ·  · 0评论

我有一个带有文本框的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>

对于它的价值,您可以autofocus在HTML5兼容的浏览器上使用该属性。从版本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>

也就是说,您可以仅在HTML 5中使用autofocus属性。

请注意:我想更新此旧线程,以显示所要求的示例以及那些仍在阅读本文的人的新的,更容易的更新。;)

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

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

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

如果您的<input><textarea>具有属性,请id=mytext使用

mytext.focus();

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

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

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptjiangjiaodianfangzaihtmlbiaodanzhongdeyuansushang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!