Последнее обновление:
Как программно нажать на клавишу в языке javascript?
Нажать руками на клавиатуре клавишу очень просто - об этом все знают. А вот как эмулировать такое нажатие? Т.е. как сделать команду на языке JS (javascript), чтобы компьютер "подумал", что будто бы пользователь сам нажал клавишу? По-другому это называется еще эмуляцией нажатия клавиш. Для примера, рассмотрим клавишу Escape. Как ее "нажать"?
Для решения подобных задач можно использовать пользовательские (кастомные) события клавиатуры. Их, эти события, следует создать и потом - запускать. Они и обеспечат программное нажатие клавиш средствами JS.
Посмотрим такой программный код:
var ev = document.createEvent('KeyboardEvent'); // Имитируем нажатие Escape (а иначе НЕ будет удален обработчик keydown)
if(typeof ev.initKeyEvent !== 'function'){ Для новых браузеров; ( > Firefox 30 )
document.body.dispatchEvent(new KeyboardEvent("keydown", {
key: "Escape",
keyCode: 27, // Это цифровой код клавиши Escape.
code: "Escape", // Код клавиши в буквенном виде.
which: 27,
shiftKey: false, // false, т.к. мы не хотим одновременно нажимать и удерживать клавиши Shift,
ctrlKey: false, // Ctrl,
metaKey: false // meta
}));
}else{ // // Для старых браузеров ( <= Firefox 30)
ev.initKeyEvent(
'keydown', // Тип события: keydown, keyup, keypress
true, // bubbles
true, // cancelable
window, // view: должно быть window
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
27, // keyCode: также может быть 0
0 // charCode: unsigned long - Unicode-символ, связанный с клавишей, также м.б. 0
);
document.body.dispatchEvent(ev);
}
Немного пояснений
Вначале задаем переменную ev, представляющую собой событие клавиатуры. Выясняем, есть ли у нее метод initKeyEvent (т.е. является ли он, собственно, методом, т.е. функцией). Если НЕ является, значит, по всей видимости, мы имеем дело уже с новым браузером, в котором данный метод не работает (в силу того, что он является устаревшим, deprecated). В новых браузерах следует создавать события клавиатуры на основе конструктора: new KeyboardEvent.
Далее - все просто. Событие клавиатуры в данном примере создается для элемента document.body, представляющего собой тег <body> вебстраницы, т.е., по сути, всю ее область. Можно, разумеется, назначить такое событие и для другого элемента, если не следует его вызывать для всего тела страницы.
Наконец, далее задается событие через конструктор и сразу же и запускается командой dispatchEvent. В качестве аргумента конструктора фигурирует специальный объект, в котором задаются соответствующие свойства будущего события клавиатуры.
Но что, если браузер - старый? Ведь любой уважающий себя (и окружающих) вебразработчик обязан делать кроссбраузерную вебстраницу - такую, которая бы без проблем открывалась и функционировала не только в новых браузерах, но и в тех, которые постарше.
Напоминаем золотое правило вебразработчиков: делаем веб страницы не для роботов (к которым относятся браузеры тоже), а для людей. И не нам указывать, каким браузером будет пользоваться человек при просмотре нашего сайта.
Такой браузер может не поддерживать конструктор KeyboardEvent, но зато он, скорее всего, поддерживает метод initKeyEvent для пользовательского события клавиатуры. Для него будет работать код после слова else.
Как видим, в этом случае также используется специальный объект со свойствами события и затем точно также используется метод dispatchEvent, только не в виде конструктора.
Сделав такой простой программный код, мы избавляемся от необходимости использовать соответствующий полифилл и добьемся универсальности его работы в самых разных браузерах. Судя по информации с сайта caniuse.com, конструктор работоспособен в браузерах, начиная от Firefox 31, Google Chrome 26, Opera 15 и т.д. Т.е. он работоспособен даже в уже достаточно немолодых браузерах. Ну, а дополнения с initKeyEvent делает его рабочим, наверное, практически везде, даже в несколько подзабытых IE9+. В некоторых браузерах, например, Firefox 32 - 38 (как минимум) работоспособна оба варианта (фактически же сработает первый).