$ .focus () не працює

Останній приклад JQuery в focus()документації станів

$('#id').focus()

повинен зробити вхід орієнтованим (активним). Мені здається, це не працює.

Навіть у консолі на цьому веб-сайті я пробую це для вікна пошуку

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

і я нічого не отримую. Будь-які ідеї?

Насправді той приклад, який ви дали для зосередження уваги на цьому сайті, працює чудово, доки ви не зосереджені на консолі. Причина, яка не працює, полягає просто в тому, що вона не краде фокус з консолі розробника. Якщо ви запустите наступний код у своїй консолі, а потім швидко натисніть у вікні браузера, ви побачите, що він фокусує поле пошуку:

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

Що стосується вашого іншого, то одне, що доставляло мені неприємності в минулому, - це порядок подій. Ви не можете викликати фокус () на елементі, який не був приєднаний до DOM. Елемент, на який ви намагаєтеся зосередитись, уже приєднаний до DOM?

Знайшли рішення в іншому місці в мережі ...

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

не працює.

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

зробили роботу.

Деякі відповіді тут пропонують використовувати setTimeoutдля затримки процесу фокусування на цільовому елементі. В одному з них згадується, що мета знаходиться всередині модального діалогу. Я не можу далі коментувати правильність setTimeoutрішення, не знаючи конкретних деталей, де воно було використано. Однак я подумав, що тут слід надати відповідь, щоб допомогти людям, які натрапляють на цю тему так само, як я

Простий факт справи полягає в тому, що ви не можете зосередитись на елементі, який ще не видно . Якщо ви зіткнулися з цією проблемою, переконайтеся, що ціль справді видна, коли робиться спроба її фокусування. В моєму випадку я щось робив у цьому напрямку

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

Це не вийшло. Я тільки зрозумів , що відбувається , коли я виконав $ ( «# elementid»). Фокус () `з консолі , який зробив роботу. Різниця - у моєму коді вище цілі немає впевненості, що ціль буде незмінною, оскільки анімація може бути не повною . І там криється підказка

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

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

працює так, як очікувалося. Я теж спочатку вкладав setTimeoutрішення, і він теж працював. Однак довільно обраний тайм-аут зобов'язаний порушити рішення рано чи пізно залежно від того, наскільки повільно хост-пристрій йде про процес забезпечення видимості цільового елемента.

якщо ви використовуєте bootstrap + modal, це працювало для мене:

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

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

Я усвідомлюю, що це старе, але натрапив на це сьогодні. Жодна з відповідей не працювала для мене, те, що я виявив, що працювало, було встановлено TimeTimeout. Я хотів, щоб моя увага була розміщена на вхідному файлі модального модуля, використовуючи setTimeout. Сподіваюся, це допомагає!

У мене теж була ця проблема. Рішення, яке працювало в моєму випадку, було використання властивості 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 ()

Я сподіваюся, що це допомагає.

Для тих, у кого проблема не працює, оскільки ви використовували "$ (елемент) .show ()". Я вирішив це наступним чином:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Тож вам не потрібен таймер, він буде виконуватися після завершення показу способу.

Додайте затримку перед фокусуванням (). 200 мс достатньо

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Якщо ця проблема знову була знову, вірити чи ні, все, що мені потрібно було зробити, це закрити інструменти для розробників. Мабуть, вкладка "Консоль" має пріоритет щодо вмісту сторінки.

Переконайтесь, що елемент та його батьки видно. Ви не можете використовувати фокус на прихованих елементах

ДОПОМОГА РОЗВ'ЯЗАННЯ У тому ж питанні, де фокус (), здавалося, не працював, але врешті-решт виявилося, що те, що потрібно, було прокрутки до правильної позиції:

• https://stackoverflow.com/a/43342974/1335717

У моєму випадку мені довелося вказати індекс вкладки ( -1якщо фокусуватись лише через скрипт)

<div tabindex='-1'>
<!-- ... -->
</div>