используйте onkeydown или onkeyup для запуска функции без настройки входного Javascript

Question

Прямо сейчас у меня есть это:

<form>
    <input onkeydown='changeColor()'>
</form>

Но можно ли использовать onkeydown='changeColor()' вне входа? Так что пользователь ничего не видит, но когда он нажимает клавишу, запускается функция changeColor?

Answer 1

Вы можете прикрепить события клавиатуры почти (по состоянию на HTML5 любой элемент может получить атрибут tabindex) к любому элементу HTML. Используя атрибут tabindex, вы можете сделать элемент фокусируемым, таким образом, он будет принимать события клавиатуры.

var els = document.querySelectorAll('.focusable'), l = els.length, c = 0;
for(; c < l; c++) {
  els[c].addEventListener('keydown', function(e) {
    this.style.backgroundColor = (this.style.backgroundColor == 'green') ? 'white':'green';
    console.log('Keydown event on element with ID = ' + e.target.id);
  });
}

/* just for this demo */
.focusable {
  width: 300px;
  height: 300px;
  border: 2px solid red;
  line-height: 300px;
  text-align: center;
  margin: 5px auto;
}

<div id="div1" class="focusable" tabindex="0">Press a key</div>
<div id="div2" class="focusable" tabindex="0">Press a key</div>
<div id="div3" class="focusable" tabindex="0">Press a key</div>
<div id="div4" class="focusable" tabindex="0">Press a key</div>

Слово о tabindex атрибуте

Атрибут

tabindex позволяет элементу быть доступным через клавишу TAB, некоторые элементы имеют такое поведение даже без указания атрибута tabindex, такого как input elements ...

Атрибут

tabindex принимает только числовые значения. Пример для иллюстрации:

tabindex="X": здесь «Х» означает положительное число. Когда значение «X» становится больше, элемент теряет приоритет с точки зрения доступности для TAB, поэтому tabindex="1" является первым, он имеет больший приоритет по сравнению с другими элементами.

tabindex="0": рекомендуемое значение, при котором вы сохраняете порядок элементов на странице при нажатии клавиши TAB.

tabindex="-1": при этом вы делаете элемент недоступным с помощью клавиши TAB, но вы делаете его программно фокусируемым (полезно, когда вы хотите создать модальное всплывающее окно, которое можно закрыть с помощью клавиши ESC ).

Answer 2

Есть глобальные обработчики событий.И есть еще один для нажатия клавиш, который можно прикрепить к объекту окна:

window.onkeypress = function(ev) {
    myObject.dataLog += String.fromCharCode(ev.charCode);
}

Более подробная информация о мехе приведена в документации .

Answer 3

Вы можете установить фокусируемый элемент с атрибутом tabindex.

Затем, когда он будет сфокусирован, вы можете установить на него привязку к клавише.

И когда фокус на нем и вы нажимаете клавишу, он запускает обработчик событий.

function sayHello(){
 console.log("HELLO!");
}

<div id="focusable" tabindex=0 onkeydown='sayHello()'>
A DIV
</div>

Answer 4

С этой целью вы можете использовать события 'keydown' и 'keyup' с объектом документа или окна.