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

238

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

javascript jquery html focus Крис
источник
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>
Pandincus
источник
2
Рекомендую привести скрипт после html-элемента.
Али Шейхпур
1
Скрипт @AliSheikhpour находится в оболочке dom ready, поэтому не имеет значения, что он находится перед элементом html, но в любом случае он не должен быть в голове.
Popnoodles
22

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

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
источник
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();
Brendan
источник
1
если использовать html5, просто добавить autofocusатрибут к элементу ввода?
Адарш Мадреча,
Как используется этот атрибут, и станет ли он сфокусированным элементом, как только появится его родительская форма?
Хом Назид
8

Извините, что натолкнулся на старый вопрос. Я нашел это через Google.

Также стоит отметить, что можно использовать более одного селектора, поэтому вы можете использовать любой элемент формы, а не только один конкретный тип.

например.

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

Это будет сфокусировано на первом вводе или текстовой области, которые он найдет, и, конечно, вы можете добавить и другие селекторы в микс. Если вы не можете быть уверены в том, что какой-то конкретный тип элемента является первым, или если вы хотите что-то более общее / многоразовое.

Эндрю Колдер
источник
Отличное предложение @Andrew.
DOK
6

Это то, что я предпочитаю использовать:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
poveilleux
источник
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();
Давид Сопко
источник