как вызвать событие фокуса в текстовом поле с помощью javascript?

Как вызвать событие фокуса в текстовом поле с помощью javascript?

Например, в jQuery мы можем инициировать событие фокуса с помощью $('#textBox').focus().

Точно так же у нас есть какие-либо аналогичные функции триггера в чистом javascript?


person Ajay Gangisetti    schedule 21.05.2015    source источник
comment
Пережить событие onfocus, возможно, w3schools.com/jsref/event_onfocus.asp?   -  person John Powell    schedule 21.05.2015


Ответы (3)


В конце концов мне пришлось возиться с этим, и я придумал что-то, что, похоже, работает в кросс-браузере:

function triggerFocus(element) {
    var eventType = "onfocusin" in element ? "focusin" : "focus",
        bubbles = "onfocusin" in element,
        event;

    if ("createEvent" in document) {
        event = document.createEvent("Event");
        event.initEvent(eventType, bubbles, true);
    }
    else if ("Event" in window) {
        event = new Event(eventType, { bubbles: bubbles, cancelable: true });
    }

    element.focus();
    element.dispatchEvent(event);
}

При этом учитывается, что некоторые браузеры поддерживают события focusin, а некоторые поддерживают только события focus. Он устанавливает фокус с помощью встроенной функции focus, а затем отправляет событие focusin или focus, в зависимости от того, что поддерживает браузер.

Протестировано в:

  • Фаерфокс 62
  • Хром 69
  • Internet Explorer 11 (да, да. Я знаю. Однако мы должны поддерживать его на работе)
  • Майкрософт Край 15

И использовать его:

var foo = document.getElementById("foo");

triggerFocus(foo);

Это универсально и должно работать с любым элементом, который может получить фокус.

person Greg Burghardt    schedule 21.09.2018
comment
корень не определен Что такое корень?? - person beliha; 26.11.2019
comment
@beliha: извини за это. У меня была опечатка в коде, которую я исправил. Вместо этого должно быть element. - person Greg Burghardt; 26.11.2019
comment
Фантастический. Это должен быть принятый ответ, это единственное, что работает! - person beliha; 27.11.2019

Да, это возможно с помощью element.focus()

document.getElementById("textBox").focus();

function myFunction(x) {
  x.style.background = "yellow";
} 
function focusText() {
document.getElementById("textBox").focus();
} 
Enter your name: <input type="text" id="textBox" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
<button onclick="focusText()">Focus the Textbox</button>

person Ankit Chaudhary    schedule 21.05.2015
comment
Это также не вызывает событие фокуса. - person Greg Burghardt; 20.05.2020
comment
Вышеприведенный фрагмент кода не запускает myFunction(), который является прослушивателем текстового поля onfocus? - person Ankit Chaudhary; 20.05.2020
comment
Собственная функция focus устанавливает фокус на элемент, но не вызывает события focus или focusin. Представьте, если onfocus снова устанавливает фокус на тот же элемент, который запускает событие focus, которое выполняет onfocus, который запускает событие focus... было бы легко создать рекурсивный вызов функции. - person Greg Burghardt; 21.05.2020

Очень просто: Element.focus()

Это не вызовет событие onfocus См. ответ Грега, если это необходимо.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

http://jsfiddle.net/eekn6nb9/

person karns    schedule 21.05.2015
comment
@Fahmi моя мысль тоже! - person karns; 07.04.2020
comment
Думаю, я знаю, почему: Element.focus() не вызывает onfocus событий, по крайней мере, в моем тестировании. метод dispatchEvent, предложенный Грегом, подходит. - person Ruben Martinez Jr.; 20.05.2020