Запустити подію клавіші / клавіші / клавіші в 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 подія 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);

Ось приклад ванільного 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 відправленняEvent

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);