【问题标题】:How can I set focus on an element in an HTML form using JavaScript?如何使用 JavaScript 将焦点设置在 HTML 表单中的元素上?
【发布时间】:2013-07-04 06:06:38
【问题描述】:

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

类似这样的:

<body onload='setFocusToTextBox()'>

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

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

【问题讨论】:

  • 就像document.getElementById('your_text_box_id').focus();一样简单。

标签: javascript html textbox focus


【解决方案1】:

不管怎样,您可以在兼容 HTML5 的浏览器上使用 the autofocus attribute。从版本 10 开始,甚至可以在 IE 上运行。

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

【讨论】:

  • 请记住,这仅适用于页面首次加载时设置焦点;它不能用于稍后设置焦点以响应输入。
  • 如果 IOS Safari (caniuse.com/#search=autofocus) 恐怕 autofocus 属性不兼容,而 .focus() 只是与 Opera Mini (caniuse.com/#search=focus) 不兼容
  • 请注意,如果您试图从控制台集中注意力,那么这是不可能的!
  • 在使用带有autofocus 的输入的innerHTML 时也可以使用。
【解决方案2】:

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

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

    </script>

【讨论】:

    【解决方案3】:

    如果您的&lt;input&gt;&lt;textarea&gt; 具有id=mytext 属性,则使用

    mytext.focus();
    

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

    【讨论】:

      【解决方案4】:

      如果您的代码是:

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

      如果你使用的是 JQuery,你也可以使用这个:

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

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

      【讨论】:

      • 我对此投了反对票,因为在基本问题中根本没有 jQuery 的含义。 OP 希望保持纯粹的 javascript
      • 好吧,你有理由,我错了,但我认为它还是有帮助的。
      • 我赞成这一点,因为在已经使用 jQuery 并且将元素作为 jQuery 选择对象的项目中,最好是一致而不是使用 vanilla JS。
      • @Fallenreaper Downvotes 是针对egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect,根据stackoverflow 的帮助中心。我发现这与这些类别相去甚远。帮助不限于OP,是吗?
      • @GellieAnn 虽然这是一个答案,但它超出了 OPs 问题的范围。他使用 vanilla javascript 是有原因的,虽然您可以提及其他框架并给出指向或提示的提示并给出原因,但您仍然应该在所问问题的范围内解决答案。因此,我支持我的反对票。
      【解决方案5】:

      我以前只用这个:

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

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

      【讨论】:

        【解决方案6】:

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

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

        【讨论】:

        【解决方案7】:

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

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

        检查是否有帮助。

        【讨论】:

        • 如果字段不在屏幕上,这在较小的屏幕上可能会让人头疼:-)
        • 如果你有一个固定的标题栏,你可能需要使用 textbox.scrollIntoView(false) 这只是将元素设置到底部而不是顶部。
        • 这是更复杂页面的正确答案。
        【解决方案8】:

        对于纯 Javascript,请尝试以下操作:

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

        【讨论】:

          【解决方案9】:

          这样做。

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

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

          你的脚本是

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

          【讨论】:

          • 您必须使用 Web API 的其他部分(例如 Document.formsDocument.getelementsByTagNameNode.childNodes)扫描文档,并且依赖已知的文档结构或查找某些元素特定属性。
          • 或者显而易见的答案...给它一个 ID ;)
          • 我建议不要使用 ID,因为它被过度指定了。而是使用名称甚至类。在这种情况下,您将使用 document.querySelector("[name='myText']") 或 document.querySelector(".myText") 来获取对输入元素的引用。
          • @ChrisLove 有趣的建议。为什么有一个 id 被“过度指定”,它到底有什么问题?它更简单,更精确,定位它的代码会稍微快一点,有一个 ID。对我来说,这听起来是最明显和最明智的做法——如果可能的话。
          • @ChrisLove 这不是过度指定 CSS 选择器,而是设置 HTML ID 属性 - 特异性是 CSS 处理解析 DOM 选择器的方式的问题,而不是 ID 和类属性的问题在 HTML 中工作。不建议使用与附加 JS 相同的 DOM 选择器来附加 CSS,这意味着您可以保持您描述的差异
          猜你喜欢
          • 2015-11-05
          • 1970-01-01
          • 1970-01-01
          • 2012-01-05
          • 1970-01-01
          • 2018-10-05
          • 2021-02-17
          • 1970-01-01
          • 2020-05-15
          相关资源
          最近更新 更多