如何使用jQuery在页面加载时专注于表单输入文本字段?


Answers:


379

将焦点放在第一个文本字段上:

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

这也做第一个文本字段,但是您可以将[0]更改为另一个索引:

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

或者,您可以使用ID:

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

2
如果使用对话框,请按以下步骤查看答案:stackoverflow.com/a/20629541/966609
Matt Canty 2014年

1
$('input[type="text"]').get(0).focus(); ...为我服务
-Rav


27

当然:

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

2
我建议将脚本放在html元素之后。
Ali Sheikhpour

1
@AliSheikhpour脚本位于dom就绪包装中,因此它在html元素之前并不重要,但无论如何都不应放在首位。
Popnoodles

22

为什么每个人都使用jQuery这样简单的东西。

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

15
因为该问题被标记为jQuery。
Adarsh Madrecha

18

在执行此操作之前,请考虑一下用户界面。我假设(尽管没有一个答案这么说)您将在使用jQuery ready()函数加载文档时执行此操作。如果用户在文档加载之前就已经将焦点放在另一个元素上(这是完全可能的),那么将焦点偷走对他们来说非常恼火。

您可以通过onfocus在每个<input>元素中添加属性来记录用户是否已经将焦点放在表单字段上,然后检查是否具有以下条件,来进行检查:

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

2
您的观点不仅在技术上是正确的,而且对于最佳UX的考虑也很精妙。太棒了!
Folusho Oladipo

12

HTML:

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

jQuery的:

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

1
如果使用html5,只需将autofocus属性添加到输入元素?
Adarsh Madrecha

该属性是如何使用的,一旦其父表单出现,它将成为焦点元素吗?
卡姆·纳兹

8

很抱歉碰到一个老问题。我是通过Google找到的。

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

例如。

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

这将重点关注它找到的第一个输入或文本区域,当然您也可以将其他选择器添加到混合中。如果不能确定某个特定的元素类型是第一个,还是想要一些通用/可重用的内容,请进行提示。


很好的建议@Andrew。
DOK

6

这是我更喜欢使用的:

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

3
这是糟糕的方式做事情,把注意力放在一个<input>的文档加载,只要使用autofocus由HTML5提供的属性
OverCoder

3

输入后放置

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

0

实现这一目标的最简单方法

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});

0

单行$('#myTextBox').focus()不会将光标放在文本框中,而是使用:

$('#myTextBox:text:visible:first').focus();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.