简体   繁体   English

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

[英]How to focus on a form input text field on page load using jQuery?

这可能很简单,但有人能告诉我如何在页面加载时让光标在文本框中闪烁吗?

Set focus on the first text field:将焦点设置在第一个文本字段上:

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

This also does the first text field, but you can change the [0] to another index:这也是第一个文本字段,但您可以将 [0] 更改为另一个索引:

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

Or, you can use the ID:或者,您可以使用 ID:

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

You can use HTML5 autofocus for this.您可以为此使用HTML5 autofocus You don't need jQuery or other JavaScript.您不需要 jQuery 或其他 JavaScript。

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

Note this will not work on IE9 and lower.请注意,这不适用于 IE9 及更低版本。

Sure:当然:

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

为什么每个人都使用 jQuery 来做这样简单的事情。

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

Think about your user interface before you do this.在您执行此操作之前,请考虑您的用户界面。 I assume (though none of the answers has said so) that you'll be doing this when the document loads using jQuery's ready() function.我假设(虽然没有一个答案是这样说的)当文档使用 jQuery 的ready()函数加载时,你会这样做。 If a user has already focussed on a different element before the document has loaded (which is perfectly possible) then it's extremely irritating for them to have the focus stolen away.如果用户在文档加载之前已经将注意力集中在不同的元素上(这是完全可能的),那么他们的焦点被偷走是非常令人恼火的。

You could check for this by adding onfocus attributes in each of your <input> elements to record whether the user has already focussed on a form field and then not stealing the focus if they have:您可以通过在每个<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">

HTML: HTML:

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

jQuery: jQuery:

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

Sorry for bumping an old question.很抱歉碰到一个老问题。 I found this via google.我通过谷歌找到了这个。

Its also worth noting that its possible to use more than one selector, thus you can target any form element, and not just one specific type.还值得注意的是,可以使用多个选择器,因此您可以定位任何表单元素,而不仅仅是一种特定类型。

eg.例如。

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

This will focus the first input or textarea it finds, and of course you can add other selectors into the mix as well.这将聚焦它找到的第一个输入或文本区域,当然您也可以将其他选择器添加到组合中。 Handy if you can't be certain of a specific element type being first, or if you want something a bit general/reusable.如果您不能确定某个特定的元素类型是第一位的,或者如果您想要一些通用/可重用的东西,则很方便。

This is what I prefer to use:这是我更喜欢使用的:

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

输入后放置

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

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

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

The Simple and easiest way to achieve this实现这一目标的最简单和最简单的方法

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

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

您还可以使用 HTML5 元素<autofocus>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM