Як зосередитись на текстовому полі форми для завантаження сторінки за допомогою jQuery?

238

Це, мабуть, дуже просто, але хтось може мені сказати, як змусити курсор блимати на текстовому полі при завантаженні сторінки?

— Крис
джерело

96

Тут ми не проти простих питань.

— DOK

Перевірити відповідь з sohail arif можна за посиланням нижче: stackoverflow.com/questions/18054459/…

— Sohail Arif

378

Встановіть фокус на перше текстове поле:

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

Це також робить перше текстове поле, але ви можете змінити [0] на інший індекс:

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

Або ви можете використовувати ідентифікатор:

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

— DOK
джерело

2

Якщо ви користуєтесь діалоговим вікном, перегляньте цю відповідь, якщо вище не працює stackoverflow.com/a/20629541/966609

— Метт Кенті,

1

$('input[type="text"]').get(0).focus(); ... працював на мене

— Rav

92

Ви можете використовувати HTML5autofocus для цього. Вам не потрібен jQuery або інший JavaScript.

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

Зауважте, що це не працюватиме на IE9 та нижче.

— Андрій Лю
джерело

автофокусування не працює в IE11 або stackoverflow.com/questions/34068302 / ...

— BA TabNabber

Це працює за моїм сценарієм, але обрана відповідь чомусь не була.

— Vishnu YS

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 знаходиться в обгортковій панелі, яка готова до дому, тому не має значення, що вона знаходиться перед html-елементом, але вона все одно не повинна бути в голові.

— Popnoodles

22

Чому всі використовують jQuery для чогось простого, як цього.

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

— TD_Nijboer
джерело

15

Тому що питання позначено як jQuery.

— Adarsh Madrecha

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 є вишуканим. Браво!

— Фолушо Оладіпо

12

HTML:

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

jQuery:

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

— брендан
джерело

1

якщо ви використовуєте html5, просто додайте autofocusатрибут до вхідного елемента?

— Адарш Мадреча

Як використовується цей атрибут, і чи стане він зосередженим елементом, як тільки з’явиться його батьківська форма?

— Хом Назид

8

Вибачте за натхнення старого питання. Я знайшов це через Google.

Також варто зазначити, що можливо використовувати більше одного селектора, таким чином ви можете націлити будь-який елемент форми, а не лише один конкретний тип.

напр.

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

Це зосередить увагу на першому введенні або текстовій області, яку він знайде, і, звичайно, ви можете додати до суміші й інші селектори. Hnady, якщо ви не можете бути впевнені, що конкретний тип елемента є першим, або ви хочете щось загальне / багаторазове використання.

— Ендрю Калдер
джерело

Відмінна пропозиція @Andrew.

— DOK

6

Це те, що я вважаю за краще використовувати:

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

— повільє
джерело

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

— Девід Сопко
джерело