Как сфокусироваться на текстовом поле ввода формы при загрузке страницы с помощью 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>

— 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();

— Давид Сопко
источник