正文 

当前位置： 首页 > 源码 >

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

     2023-02-19     301

关键词：

【中文标题】如何使用 JavaScript 将焦点设置在 HTML 表单中的元素上？【英文标题】：How can I set focus on an element in an HTML form using JavaScript? 【发布时间】：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();一样简单。 【参考方案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，根据*** 的帮助中心。我发现这与这些类别相去甚远。帮助不限于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

【讨论】：

AFAIK 表单没有“名称”属性 表单拥有“名称”已经有很长时间了，在 HTML5 中，它们仍然如此。见w3.org/TR/html5/forms.html#the-form-element【参考方案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.forms、Document.getelementsByTagName 或 Node.childNodes）扫描文档，并且依赖已知的文档结构或查找某些元素特定属性。 或者显而易见的答案...给它一个 ID ;) 我建议不要使用 ID，因为它被过度指定了。而是使用名称甚至类。在这种情况下，您将使用 document.querySelector("[name='myText']") 或 document.querySelector(".myText") 来获取对输入元素的引用。 @ChrisLove 有趣的建议。为什么有一个 id 被“过度指定”，它到底有什么问题？它更简单，更精确，定位它的代码会稍微快一点，有一个 ID。对我来说，这听起来是最明显和最明智的做法——如果可能的话。 @ChrisLove 这不是过度指定 CSS 选择器，而是设置 HTML ID 属性 - 特异性是 CSS 处理解析 DOM 选择器的方式的问题，而不是 ID 和类属性的问题在 HTML 中工作。不建议使用与附加 JS 相同的 DOM 选择器来附加 CSS，这意味着您可以保持您描述的差异

如何在 Elm 中设置焦点？

...m包中的focus函数用于通过Task设置焦点（不使用任何ports或JavaScript）。在内部，它使用re 查看详情

使用 Javascript 将焦点设置在选择元素上会将第一个项目滚动到视图之外

】使用Javascript将焦点设置在选择元素上会将第一个项目滚动到视图之外【英文标题】：SettingfocusonselectelementwithJavascriptscrollsfirstitemoutofview【发布时间】：2016-07-2506:26:46【问题描述】：我遇到了一个问题，我希望在选择框（多选... 查看详情

将键盘选项卡焦点设置到页面顶部/使用 JavaScript / jQuery 重置键盘焦点

】将键盘选项卡焦点设置到页面顶部/使用JavaScript/jQuery重置键盘焦点【英文标题】：Setkeyboardtabbingfocustothetopofthepage/resettingkeyboardfocuswithJavaScript/jQuery【发布时间】：2021-12-0704:37:43【问题描述】：在努力使网站更易于访问时，我遇... 查看详情

如何将焦点设置在第一个输入或使用类名选择？

】如何将焦点设置在第一个输入或使用类名选择？【英文标题】：HowtosetfocusonthefirstinputORselectwithaclassname?【发布时间】：2020-05-1911:57:41【问题描述】：我必须将焦点设置在具有特定类名的页面的每个选项卡上的第一个元素上。这... 查看详情

辅助功能：如何始终将焦点设置在导航项的标题视图上

】辅助功能：如何始终将焦点设置在导航项的标题视图上【英文标题】：Accessibility:Howtoalwayssetthefocusonthenavigationitem\'stitleview【发布时间】：2013-04-0914:18:33【问题描述】：我在我的应用程序中使用UINavigationController。当使用VoiceOver... 查看详情

将焦点设置为 iframe 内容

...容页面开始“收听”。有什么方法可以在外部页面中使用JavaScript将焦点设置到内部页面，这样我就不必在iframe内部单击？编 查看详情

如何在使用fancybox打开的新页面中将焦点设置在文本框上

】如何在使用fancybox打开的新页面中将焦点设置在文本框上【英文标题】：Howtosetfocusonatextboxinanewpage,openedusingfancybox【发布时间】：2014-01-2312:20:24【问题描述】：我有2页，page1和page2。点击page1中的链接后，page2将加载到fancybox中。... 查看详情

如何将焦点设置在页面顶部[重复]

】如何将焦点设置在页面顶部[重复]【英文标题】：howtosetfocusontopofthepage[duplicate]【发布时间】：2011-02-2618:17:11【问题描述】：如何将焦点设置到页面顶部？【问题讨论】：这几乎不是一个问题，而且肯定不足以开始回答。而且... 查看详情

当initialValues通过\绑定到props.object时，如何使用Formik表单将焦点设置在TextField\input上？

】当initialValues通过\\\\绑定到props.object时，如何使用Formik表单将焦点设置在TextField\\\\input上？【英文标题】：HowtosetfocusonaTextField\\inputusingaFormikformwheninitialValuesarepassedthrough\\boundtoprops.object?当initialValues通过\\绑定到props.object时 查看详情

如何将焦点设置在列表视图项上？

】如何将焦点设置在列表视图项上？【英文标题】：HowtosetfocusonaListViewitem?【发布时间】：2015-05-1204:57:59【问题描述】：我正在尝试编写一个在列表视图中选择并聚焦特定项目的程序。为什么调用ListView_SetSelectionMark（或发送LVM_SE... 查看详情

如何在winform c#中禁用按钮时将焦点设置在按钮上？

】如何在winformc#中禁用按钮时将焦点设置在按钮上？【英文标题】：Howtosetfocusonbuttonwhilebuttonisdisabledinwinformc#?【发布时间】：2021-05-2120:36:02【问题描述】：我想在Windows窗体应用程序中禁用按钮时在按钮中设置焦点。有没有办法... 查看详情

使用 Prism 和 MVVM 方式从另一个 Picker 中选择项目后，如何将焦点设置在 Picker 上？

】使用Prism和MVVM方式从另一个Picker中选择项目后，如何将焦点设置在Picker上？【英文标题】：HowdoIsetfocusonaPickerafterselectinganitemfromanotherPickerusingPrismandtheMVVMway?【发布时间】：2019-06-2808:25:25【问题描述】：场景两个不可见但启用的... 查看详情

创建和显示布局时如何将焦点设置在视图上？

】创建和显示布局时如何将焦点设置在视图上？【英文标题】：Howtosetfocusonaviewwhenalayoutiscreatedanddisplayed?【发布时间】：2011-01-1004:12:33【问题描述】：目前，我有一个包含Button、TextView和EditText的布局。当布局显示时，焦点将自动... 查看详情

使用 JavaScript 更改焦点占位符文本的颜色 [关闭]

】使用JavaScript更改焦点占位符文本的颜色[关闭]【英文标题】：ChangingcolorofplaceholdertextonfocuswithJavaScript[closed]【发布时间】：2016-01-2200:38:04【问题描述】：我正在尝试将占位符文本的颜色更改为白色焦点。您可以查看联系表格here... 查看详情

如何将焦点设置在跨域的 iframe 上

】如何将焦点设置在跨域的iframe上【英文标题】：Howtosetfocusonaniframethatiscross-domain【发布时间】：2020-05-1712:32:33【问题描述】：类似于下面的帖子：SetfocusoniframeinChromeSettingfocustoiframecontents我希望能够从根/父级将焦点传递给iframe... 查看详情

如何将焦点设置在 div 上

】如何将焦点设置在div上【英文标题】：Howtosetfocusonadiv【发布时间】：2016-12-0606:36:04【问题描述】：我在一个页面中有多个div<div>...<div>....<divclass="input-fieldcols12"style="display:inline-block;"><spanstyle="width:auto;cursor:pointer... 查看详情

Vue：如何将焦点设置在输入字段上

】Vue：如何将焦点设置在输入字段上【英文标题】：Vue:howtosetthefocusonaninputfield【发布时间】：2021-03-1820:14:23【问题描述】：当我加载页面时，我希望焦点转到输入字段<b-form-inputplaceholder="Name*"name="name"autofocus></b-form-input>... 查看详情

使用 UITabBarController 的 UIAccessibility 焦点

...abBarController【发布时间】：2019-10-0410:06:37【问题描述】：如何将UIAccessibility的焦点设置在UITabBarController的选定选项卡的内容上？它一直专注于选定的UITabBarItem。我尝试将焦点设置在UITabBarControl 查看详情