Как установить курсор в input при jQuery click?

Question

[Alexander Lashchevsky]

Здравствуйте!
Заранее извините за тупой вопрос.

На странице есть две формы: одна просто на странице, другая во "всплывающем блоке" (в div, который показывается при клике на нужную кнопку).

Чтобы при загрузке страницы input c id name автоматически брался в фокус, я использую:

$(function() {
	$('#form-onpage #name').focus();
});

Всё работает. Но мне также необходимо, чтобы при появлении всплывающего блока в фокус брался input, находящийся в этом всплывающем div. Я пытаюсь так:

$('#button-openpopup').click(function(){ 
	$('#form-popup').addClass('active');
	$('#form-popup #name').focus();
});

Но ничего не работает.

Как же исправить эту ситуацию?

С уважением,
Александр.

Comments

[Алексей Немиро]

Тут нужен код, который показывает окно (или какой плагин используется для этого, или еще что).

Скорее всего нужно в обработчик появления окна добавлять фокусировку.

[1001001 111]

Александр Лащевский
Как вариант использовать settimeout

setTimeout(function(){ $('#form-popup #name').focus(); }, 500);

[Алексей Немиро]

Имя Фамилия: это простой, но плохой вариант :) Поэтому и не стал предлагать.

Правильней и надежней в обработчик появления окна добавить. Скорость появления окна может быть разной. Если использовать setTimeout придется постоянно за этим следить. Лишние проблемы.

[1001001 111]

Алексей Немиро: ну будет развернутый вопрос, будет и развернутый ответ, а пока что и так сойдет =)))

[Александр Глобов]

Имя Фамилия: Может в последней версии и работает. Ну это не отменяет того, что 2 одинаковых id на странице - это плохо.

[1001001 111]

Александр Глобов Так я и не пишу что это хорошо, но в данном случае ничего плохого не случится до тех пор пока не начнем обращаться напрямую к ID.

[Александр Глобов]

Имя Фамилия: Извините, промахнулся) Не вам это был ответ, а товарищу shqn на Как установить курсор в input при jQuery click?

[shqn]

Александр Глобов: Плохо, не спорю )

Answer 1

[Сергей]

Скорее всего у вас на событии focus висит какой-то обработчик.
Выполните
$('#form-popup #name').focus
Увидите текст обработчика(если я не ошибаюсь и он есть).

Answer 2

[prudcky]

Была такая же проблема. Так же не могу усатновить фокус.
Решил -> Выбрал этот же элемент нативным js и работает ( диво дивное ), почему так - хз

let textUserQuestion = document.getElementById('textUserQuestion');
        textUserQuestion.focus();

Answer 3

[Артём]

Еще не маловажный момент, установка .focus(); сработает только на видимом инпуте, если он скрыт в момент вызова focus(), не установится

Answer 4

[IceJOKER]

Два одинаковых id - как вы думаете насколько умен jQuery, чтоб понять какому из двух одинаковых id запросить фокус? О_О

Comments

[shqn]

Выборка по ним идет контекстно, (#form-onpage и #form-popup), так что она вернет правильный инпут. Я думаю тут проблема в том, что в момент вызовы фокуса, всплывающий блок еще скрыт.

[IceJOKER]

shqn: не обратил внимания, но вроде два одинаковых id запрещены , ведь на то и id, чтоб однозначно идентифицировать элемент

[shqn]

IceJOKER: Это да. Но видимо Sizzle внутри jQuery как-то разруливает такие моменты

[Александр Глобов]

shqn: Нет, не разруливает. Берет первый попавшийся

[Alexander Lashchevsky]

shqn: технически он открыт всегда, просто у него стоит width: 0; opacity: 0 и его "показ" - всего-лишь добавление класса active c width: 100%; opacity: 1.

[Alexander Lashchevsky]

shqn: в любом случае, я добавил каждому input свой уникальный id и проблема не решилась.

[shqn]

Александр Глобов: Тогда почему это правильно работает? codepen.io/anon/pen/ByWNXJ

Answer 5

[Артем Болухта]

Вместо .click() используйте .on()
$('#button-openpopup').on('click', function(){
$('#form-popup').addClass('active');
$('#form-popup #name').focus();
});

И да, два одинаковых ID не работают корректно

Comments

[Геннадий]

2 точки перед on

[Артем Болухта]

Геннадий, спасибо, поправил)

Answer 6

[Владимир Зимин]

Благодарю за разбор вопроса.
Тоже решило мою проблему.
Только я до сих пор не понимаю,
почему она вообще возникла.