如何使用 jQuery 在页面加载时关注表单输入文本字段？
Posted
技术标签:
【中文标题】如何使用 jQuery 在页面加载时关注表单输入文本字段？【英文标题】：How to focus on a form input text field on page load using jQuery? 【发布时间】：2010-12-08 04:39:09 【问题描述】：这可能很简单，但是有人可以告诉我如何让光标在页面加载时在文本框上闪烁吗？
【问题讨论】：
我们不介意这里的简单问题。 @DOK 这不是很好。 【参考方案1】：将焦点放在第一个文本字段上：
$("input:text:visible:first").focus();
这也是第一个文本字段，但您可以将 [0] 更改为另一个索引：
$('input[@type="text"]')[0].focus();
或者，您可以使用 ID：
$("#someTextBox").focus();
【讨论】：
如果使用对话框，如果上述方法不起作用，请查看此答案***.com/a/20629541/966609$('input[type="text"]').get(0).focus(); ...为我工作
.focus() 在 3.3 中被弃用，对于较新的版本使用 .trigger('focus');【参考方案2】：
您可以为此使用html5 autofocus。您不需要 jQuery 或其他 javascript。
<input type="text" name="some_field" autofocus>
请注意，这不适用于 IE9 及更低版本。
【讨论】：
自动对焦在 IE11 中也不起作用***.com/questions/34068302/… 这适用于我的场景，但所选答案由于某种原因没有。 这很棒而且更短，即使使用了单个字母id！ :P【参考方案3】：
当然：
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
$("#myTextBox").focus();
);
</script>
</head>
<body>
<input type="text" id="myTextBox">
</body>
【讨论】：
我建议将脚本放在html元素之后。 @AliSheikhpour 脚本位于 dom 就绪包装器中，因此它在 html 元素之前并不重要，但它不应该在 head 中。【参考方案4】：为什么每个人都使用 jQuery 来做这么简单的事情。
<body OnLoad="document.myform.mytextfield.focus();">
【讨论】：
因为问题被标记为 jQuery。【参考方案5】：在执行此操作之前，请考虑您的用户界面。我假设（尽管没有一个答案这么说）当使用 jQuery 的 ready() 函数加载文档时你会这样做。如果用户在文档加载之前已经将注意力集中在不同的元素上（这是完全可能的），那么让他们失去焦点是非常恼火的。
您可以通过在每个 <input> 元素中添加 onfocus 属性来检查这一点，以记录用户是否已经关注表单字段，然后如果他们已经关注则不窃取焦点：
var anyFieldReceivedFocus = false;
function fieldReceivedFocus()
anyFieldReceivedFocus = true;
function focusFirstField()
if (!anyFieldReceivedFocus)
// Do jQuery focus stuff
<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">
【讨论】：
您的观点不仅在技术上是正确的，而且您对可能的最佳用户体验的考虑也很精致。太棒了！【参考方案6】：HTML：
<input id="search" size="10" />
jQuery:
$("#search").focus();
【讨论】：
如果使用html5，只需在输入元素中添加autofocus属性？
该属性是如何使用的，它的父窗体一出现，它会成为焦点元素吗？【参考方案7】：
很抱歉碰到一个老问题。我是通过谷歌找到的。
还值得注意的是，它可以使用多个选择器，因此您可以定位任何表单元素，而不仅仅是一种特定类型。
例如。
$('#myform input,#myform textarea').first().focus();
这将聚焦它找到的第一个输入或文本区域，当然您也可以将其他选择器添加到组合中。如果您不能确定某个特定的元素类型是第一个，或者您想要一些通用/可重用的东西，这将非常方便。
【讨论】：
很好的建议@Andrew。【参考方案8】：这是我更喜欢使用的：
<script type="text/javascript">
$(document).ready(function ()
$("#fieldID").focus();
);
</script>
【讨论】：
这是一种糟糕的做事方式，专注于文档加载的 ，只需使用 HTML5 提供的autofocus 属性【参考方案9】：
输入后放置
<script type="text/javascript">document.formname.inputname.focus();</script>
【讨论】：
【参考方案10】：单独的$('#myTextBox').focus() 行不会将光标放在文本框中，而是使用：
$('#myTextBox:text:visible:first').focus();
【讨论】：
【参考方案11】：$("#search").focus();
你也可以使用HTML5元素<autofocus>
【讨论】：
【参考方案12】：实现这一目标的最简单最简单的方法
$('#button').on('click', function ()
$('.form-group input[type="text"]').attr('autofocus', 'true');
);
【讨论】：
以上是关于如何使用 jQuery 在页面加载时关注表单输入文本字段？的主要内容，如果未能解决你的问题，请参考以下文章