Как сфокусироваться на текстовом поле ввода формы при загрузке страницы с помощью jQuery?


238

Это, вероятно, очень просто, но может кто-нибудь сказать мне, как заставить курсор мигать в текстовом поле при загрузке страницы?


96
Мы не возражаем против простых вопросов здесь.
ДОК

Проверьте ответ от sohail arif по ссылке ниже: stackoverflow.com/questions/18054459/…
Sohail Arif

Ответы:


378

Установить фокус на первое текстовое поле:

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

Это также делает первое текстовое поле, но вы можете изменить [0] на другой индекс:

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

Или вы можете использовать идентификатор:

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

2
Если вы используете диалоговое окно, просмотрите этот ответ, если вышеописанное не работает stackoverflow.com/a/20629541/966609
Мэтт Канти

1
$('input[type="text"]').get(0).focus(); ... работал для меня
Рав

92

Вы можете использовать HTML5autofocus для этого. Вам не нужен jQuery или другой JavaScript.

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

Обратите внимание, что это не будет работать на IE9 и ниже.


автофокус не работает в IE11 либо stackoverflow.com/questions/34068302/…
BA TabNabber

Это работает для моего сценария, но выбранный ответ не по какой-то причине.
Вишну Ю.С.

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-элемента.
Али Шейхпур

1
Скрипт @AliSheikhpour находится в оболочке dom ready, поэтому не имеет значения, что он находится перед элементом html, но в любом случае он не должен быть в голове.
Popnoodles

22

Почему все используют jQuery для чего-то такого простого?

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

15
Потому что вопрос помечен как jQuery.
Адарш Мадреча

18

Подумайте о своем пользовательском интерфейсе, прежде чем сделать это. Я предполагаю (хотя ни один из ответов не сказал так), что вы будете делать это, когда документ загружается с использованием ready()функции jQuery . Если пользователь уже сфокусировался на другом элементе до того, как документ был загружен (что вполне возможно), ему крайне неприятно, чтобы фокус был украден.

Вы можете проверить это, добавив 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атрибут к элементу ввода?
Адарш Мадреча,

Как используется этот атрибут, и станет ли он сфокусированным элементом, как только появится его родительская форма?
Хом Назид

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


0

Самый простой и легкий способ добиться этого

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

0

Одна строка $('#myTextBox').focus()не поместит курсор в текстовое поле, вместо этого используйте:

$('#myTextBox:text:visible:first').focus();
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.