Запустить событие нажатия клавиш / нажатия клавиш / нажатия клавиш в JS / jQuery?

Каков наилучший способ имитации ввода пользователем текста в поле ввода текста в JS и / или jQuery?

На самом деле я не хочу помещать текст в поле ввода, я просто хочу вызвать все обработчики событий , которые обычно запускаются пользователем, вводящим информацию в поле ввода. Это означает фокусировку, нажатие клавиш, нажатие клавиш, нажатие клавиш и размытие. Думаю.

Так как же это сделать?

Вы можете вызвать любое из событий с помощью прямого вызова, например:

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

Это делает то, что вы пытаетесь сделать?

Вы, вероятно, должны также вызвать .focus()и потенциально.change()

Если вы хотите инициировать события клавиш с определенными клавишами, вы можете сделать это следующим образом:

$(function() {
    var e = $.Event('keypress');
    e.which = 65; // Character 'A'
    $('item').trigger(e);
});

Здесь происходит интересное обсуждение событий нажатия клавиш: jQuery Event Keypress: Какая клавиша была нажата? особенно в отношении кросс-браузерной совместимости со свойством .which.

Вы можете отправлять такие события, как

el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

Чтобы вызвать enterнажатие клавиши, мне пришлось изменить ответ @ebynum, в частности, используя свойство keyCode.

e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);

Вот пример vanilla js для запуска любого события:

function triggerEvent(el, type){
if ('createEvent' in document) {
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

Вы можете достичь этого с помощью: EventTarget.dispatchEvent(event)и, передав новое KeyboardEvent в качестве события.

Например: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Рабочий пример:

// get the element in question
const input = document.getElementsByTagName("input")[0];

// focus on the input element
input.focus();

// add event listeners to the input element
input.addEventListener('keypress', (event) => {
  console.log("You have pressed key: ", event.key);
});

input.addEventListener('keydown', (event) => {
  console.log(`key: ${event.key} has been pressed down`);
});

input.addEventListener('keyup', (event) => {
  console.log(`key: ${event.key} has been released`);
});

// dispatch keyboard events
input.dispatchEvent(new KeyboardEvent('keypress',  {'key':'h'}));
input.dispatchEvent(new KeyboardEvent('keydown',  {'key':'e'}));
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));

<input type="text" placeholder="foo" />

MDN рассылка событий

MDN KeyboardEvent

Теперь вы можете сделать:

var e = $.Event("keydown", {keyCode: 64});

Прежде всего, нужно сказать, что образец от Sionnach733 работал безупречно. Некоторые пользователи жалуются на отсутствие реальных примеров. Вот мои два цента. Я работал над симуляцией щелчка мыши при использовании этого сайта: https://www.youtube.com/tv . Вы можете открыть любое видео и попробовать запустить этот код. Он выполняет переход к следующему видео.

function triggerEvent(el, type, keyCode) {
    if ('createEvent' in document) {
            // modern browsers, IE9+
            var e = document.createEvent('HTMLEvents');
            e.keyCode = keyCode;
            e.initEvent(type, false, true);
            el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.keyCode = keyCode;
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

var nextButton = document.getElementsByClassName('icon-player-next')[0];
triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press

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

setTimeout(function() { $("#txtName").keypress() } , 1000);

Любое использование $("#txtName").keypress()было проигнорировано , хотя размещено в конце .ready() function. Никакого конкретного дополнения DOM в любом случае не создавалось асинхронно.

Для приведения типов к KeyboardEventInit и предоставления правильного целого числа keyCode

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);