如何使用jQuery在页面加载时聚焦表单输入文本框？

Question

如何使用jQuery在页面加载时聚焦表单输入文本框？

javascriptjqueryhtmlfocus

296

这可能很简单，但是有人能告诉我如何在页面加载时让文本框上的光标闪烁吗？

- chris

108

我们不介意这里出现简单的问题。 - DOK

4

@DOK 这个言论现在看来已经不太合适了。 - Deepak Kamat

12个回答

110

你可以使用HTML5 autofocus来实现这个功能。你不需要jQuery或其它JavaScript。

<input type="text" name="some_field" autofocus>

注意：这在IE9及以下版本上不起作用。

- Andrew Liu

自动对焦属性在IE11中也无效。 - BA TabNabber

2

这对我的情况有效，但由于某些原因，所选答案并不适用。 - Vishnu Y S

这很棒，而且更短，即使只使用了一个字母 id！ :P - Andreas

30

当然可以：

<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>

- Pandincus

4

我建议将脚本放在HTML元素之后。 - Ali Sheikhpour

1

@AliSheikhpour的脚本位于dom就绪包装器内，因此它不会受到放置在html元素之前的影响，但无论如何都不应该放在head中。 - Popnoodles

22

为什么每个人都用jQuery来处理这么简单的事情。

<body OnLoad="document.myform.mytextfield.focus();">

- TD_Nijboer

29

由于这个问题被标记为jQuery，因此我需要翻译它。 - Adarsh Madrecha

20

在进行此操作之前，请考虑您的用户界面。我假设（尽管没有答案提到）您将使用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">

- Tim Down

2

你的观点不仅在技术上是正确的，而且你对于最佳用户体验的考虑非常精致。太棒了！ - Folusho Oladipo

13

HTML：

  <input id="search" size="10" />

jQuery：

$("#search").focus();

- brendan

1

如果使用HTML5，只需将“autofocus”属性添加到输入元素中即可吗？ - Adarsh Madrecha

该属性如何使用，它是否会在其父表单出现时成为焦点元素？ - Khom Nazid

11

抱歉打扰了一个旧的问题，我通过谷歌找到了这个。

值得注意的是，可以使用多个选择器，因此您可以针对任何表单元素进行定位，而不仅仅是特定类型的一个。

例如：

$('#myform input,#myform textarea').first().focus();

这将聚焦于找到的第一个输入框或文本域，当然你也可以将其他选择器加入其中。如果你不能确定特定元素类型是第一个，或者想要一些通用/可重用的东西，那么这个功能就很方便。

- Andrew Calder

7

我更喜欢使用以下内容：

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

- poveilleux

3

在文档加载时专注于<input>是一种不好的做事方式，只需使用HTML5提供的autofocus属性即可。 - OverCoder

3

在输入框后面放置

<script type="text/javascript">document.formname.inputname.focus();</script>

- Bill Marquis

2

单独使用$('#myTextBox').focus()不能将光标放在文本框中，应该使用以下代码：

$('#myTextBox').focus();

$('#myTextBox:text:visible:first').focus();

- David Sopko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DOK · Accepted Answer

将焦点设置在第一个文本框上：

 $("input:text:visible:first").focus();

这也适用于第一个文本字段，但您可以将[0]更改为另一个索引：

$('input[@type="text"]')[0].focus();

或者，您可以使用ID：

$("#someTextBox").focus();