Смоделируйте событие клавиатуры shift + 1 и получите его в обработчике событий

Question

Я делаю Spec для моей структуры, которая должна проверить событие с shift ключ. Поэтому я хотел бы вставить прагматически ! как будто я нажал shift + 1,

Я использую Syn Syn Framework, но не могу заставить его имитировать SHIFT + 1, Согласно документации это должно быть

Syn.type('[shift]1[shift-up]', 'textInput2'); 

но это не работает. Я бы ожидал ! характер, event.shiftKey быть trueи event.key быть 33 но я получаю 1 вместо ! и event.key == 49 вместо.

Как это возможно с Syn, или ванильным JavaScript?

Я сделал это jsFiddle, чтобы проверить это, проверить консоль.

Answer 1

Если вы посмотрите в Syn Tests здесь https://github.com/bitovi/syn/blob/c77ae2cbb19ff0a5d3ecd3f9968e15adad289a79/test/qunit/key_test.js

Вы можете увидеть, что они имитируют заглавную букву "А", выполнив "[сдвиг]A[сдвиг вверх]". Син просто создает событие, передает и устанавливает значение. Он не симулирует взаимодействие с клавиатурой нижнего уровня.

 Syn.type('[shift]![shift-up]', 'textInput2');
 // outputs 33 true 

Установка таймаута заставит его работать, не знаю почему, но это так: http://jsfiddle.net/2zsNV/5/

Answer 2

Хорошо, вы правы. Syn не делает это правильно, и я могу догадаться, почему - браузер не может определить вашу раскладку клавиатуры (см. Здесь: определение раскладки клавиатуры с помощью javascript), поэтому он действительно не может сказать, что вы должны получить для Shift+1, так что это просто дает вам "1".

Вы бы предположили, что

Syn.type('[shift]![shift-up]', 'textInput2'); 

Будет работать, как ожидалось, но это тоже не... Я думаю, что это ошибка в Syn.

Итак, вы можете сделать это в сыром JavaScript? Я могу подобраться.

По-видимому, довольно сложно заставить его работать в кросс-браузерном режиме, и это привело меня к кроличьей норе пробовать разные вещи. Сначала я посмотрел на этот вопрос: возможно ли программно моделировать события нажатия клавиш? но это не сработало правильно в chrome, тогда я попробовал различные комбинации событий и значений на основе их документации без особого успеха. Тогда я нашел этот вопрос: запуск события клавиатуры в Chrome, который привел меня к этому коду.

Вставить этот код в JS, а затем вызвать его с помощью:

var e = crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
document.getElementById('textInput2').dispatchEvent(e);

Даст результат, который вы ожидаете. Тем не менее, он на самом деле не записывает значение в поле ввода. Конечно, вы могли бы подделать это и просто добавить туда текст, я не уверен, является ли это ограничением в том, как работают события, или что-то не так с кодом. Конечно, для теста это может быть все, что вам нужно.

Вот скрипка, может быть, кто-то еще может сделать последний прыжок.