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

chr*_*ris 227 html javascript jquery focus

这可能非常简单,但是有人可以告诉我如何在页面加载时让文本框上的光标闪烁吗?

DOK*_*DOK 356

将焦点设置在第一个文本字段:

 $("input:text:visible:first").focus();
Run Code Online (Sandbox Code Playgroud)

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

$('input[@type="text"]')[0].focus(); 
Run Code Online (Sandbox Code Playgroud)

或者,您可以使用ID:

$("#someTextBox").focus();
Run Code Online (Sandbox Code Playgroud)

  • `.focus()` 在 3.3 中已被废弃,对于较新的版本,请使用 `.trigger('focus');` (6认同)
  • 如果使用对话框,如果以上操作无效,请参阅此答案http://stackoverflow.com/a/20629541/966609 (2认同)

And*_*Liu 86

您可以使用HTML5autofocus.您不需要jQuery或其他JavaScript.

<input type="text" name="some_field" autofocus>
Run Code Online (Sandbox Code Playgroud)

请注意,这不适用于IE9及更低版本.

  • 这适用于我的场景,但所选答案由于某种原因不起作用。 (2认同)

Pan*_*cus 26

当然:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 我建议将脚本放在html元素之后。 (2认同)

TD_*_*oer 21

为什么每个人都使用jQuery这样简单.

<body OnLoad="document.myform.mytextfield.focus();">
Run Code Online (Sandbox Code Playgroud)

  • 因为这个问题被标记为jQuery. (13认同)

Tim*_*own 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">
Run Code Online (Sandbox Code Playgroud)

  • 您的观点不仅在技术上是正确的,而且您对最佳用户体验的考虑也很精细.好样的! (2认同)

bre*_*dan 12

HTML:

  <input id="search" size="10" />
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$("#search").focus();
Run Code Online (Sandbox Code Playgroud)


And*_*der 8

很抱歉碰到一个老问题.我通过谷歌找到了这个.

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

例如.

$('#myform input,#myform textarea').first().focus();
Run Code Online (Sandbox Code Playgroud)

这将集中它找到的第一个输入或textarea,当然你也可以添加其他选择器.如果你不能确定某个特定的元素类型是第一个,或者你想要一些通用/可重用的东西,那么.


小智 5

这是我更喜欢使用的:

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

  • 做事很糟糕,只专注于文档加载时的&lt;input&gt;,只需使用HTML5提供的`autofocus`属性即可 (2认同)