Как смоделировать нажатие клавиш в JS

Question

Я хочу нажать на <img> и заставить браузер имитировать ввод переменной + + [ENTER].По сути, это должно имитировать то же самое, что происходит, если сканер сканирует штрих-код

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

В предоставленном jsfiddle в настоящее время есть переменная, отправляемая в поле ввода, но это не обязательно для окончательных результатов.

Я хотел бы сохранить этот ванильный javascript, поскольку я все еще изучаю его и не хочу переходить к Jquery, пока у меня не будут твердо стоять ноги в JS.

https://jsfiddle.net/pshock13/o2gtzaj5/215

document.getElementById('barcode').addEventListener('click', function() {
      //this is where I want theBarcode to be typed out + [ENTER] automatically.
      main_input.value = theBarcode;
    })

Answer 1

Вы можете смоделировать нажатие клавиши, отправив KeyboardEvent для keydown и keyup.

например. Имитация нажатия клавиш для вашего штрих-кода:

document.getElementById('barcode').addEventListener('click', function() {
    main_input.value = theBarcode;

    [...theBarcode].forEach(function(c) {
        window.dispatchEvent(new KeyboardEvent('keydown',{'key':c}));
        window.dispatchEvent(new KeyboardEvent('keyup',{'key':c}));
    });

    window.dispatchEvent(new KeyboardEvent('keydown',{'key':'Enter'})); 
    window.dispatchEvent(new KeyboardEvent('keyup',{'key':'Enter'}));
});