$.focus() не работает

последний пример документации jQuery focus() сообщает

$('#id').focus()

должен сделать ввод сфокусированным (активным). Кажется, я не могу работать.

Даже в консоли на этом сайте я пытаюсь найти окно поиска

$('input[name="q"]').focus()

и я ничего не получаю. Любые идеи?

Ответ 1

На самом деле пример, который вы дали для фокусировки на этом сайте, работает отлично, если вы не сосредоточены на консоли. Причина, по которой это не работает, - это просто потому, что она не ворует фокус с консоли разработчика. Если вы запустите следующий код в консоли и затем быстро нажмите в окне своего браузера, вы увидите, что он фокусирует поле поиска:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Что касается вашего другого, то, что в прошлом меня беспокоило, - это порядок событий. Вы не можете вызвать focus() для элемента, который не был прикреплен к DOM. Элемент, который вы пытаетесь сфокусировать, уже привязан к DOM?

Ответ 2

Найден решение в другом месте в сети...

$('#id').focus();

не работает.

$('#id').get(0).focus();

действительно работал.

Ответ 3

Некоторые из ответов здесь предлагают использовать setTimeout для задержки процесса фокусировки на целевом элементе. Один из них упоминает, что цель находится внутри модального диалога. Я не могу больше прокомментировать правильность решения setTimeout, не зная конкретных деталей того, где он был использован. Тем не менее, я думал, что должен предоставить ответ здесь, чтобы помочь людям, которые сталкиваются с этой нитью, как и я.

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

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Это не сработало. Я только понял, что происходит, когда я выполнил $('# elementid'). Focus() `из консоли, в которой сделал. Разница - в моем коде выше цели нет уверенности в том, что цель будет отображаться, потому что анимация может быть неполной. И есть ключ

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

работает так, как ожидалось. Я тоже изначально поставил решение setTimeout, и он тоже работал. Тем не менее, произвольно выбранный тайм-аут обязан рано или поздно разорвать решение в зависимости от того, как медленно хост-устройство переходит к процессу обеспечения видимости целевого элемента.

Ответ 4

Я понимаю, что это старый, но наткнулся на него сегодня. Ни один из ответов не работал у меня, что я нашел, что работал был setTimeout. Я хотел, чтобы мой фокус был помещен на входной файл модального файла, используя обработанный setTimeout. Надеюсь, это поможет!

Ответ 5

если вы используете bootstrap + modal, это сработало для меня:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Ответ 6

У меня также была эта проблема. Решение, которое работало в моем случае, было использование свойства tabindex в элементе HTML.

Я использовал ng-repeat для некоторых элементов li внутри списка, и я не смог перенести фокус на первый li, используя .focus(), поэтому я просто добавил атрибут tabindex для каждого li во время цикла.

так что теперь <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

То, что +1 было индексом, начинается с 0. Также убедитесь, что элемент присутствует в DOM перед вызовом функции .focus()

Надеюсь, это поможет.

Ответ 7

ДОПОЛНИТЕЛЬНОЕ РЕШЕНИЕ Если бы проблема с фокусом() не работала, но в конечном итоге оказалось, что нужно было прокручиваться до правильной позиции:

Ответ 8

На всякий случай кто-то другой сталкивается с этим вопросом и имеет ту же ситуацию, что и я, - я пытался настроить фокус после нажатия на другой элемент, но фокус не работал. Оказывается, мне просто нужен e.preventDefault(); - вот пример:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Это помогло:

Если вы вызываете HTMLElement.focus() из обработчика события mousedown, вы должны вызвать event.preventDefault(), чтобы фокус не покидал HTMLElement. Источник: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus