Question

现在我有这个：

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

但是我可以在输入之外使用onkeydown='changeColor()'吗？因此，用户什么都没有看到，但是当他们按下一个键时会触发changeColor功能吗？

Answer 1

您可以将'keydown'和'keyup'事件用于文档或窗口对象。

Answer 2

有全局事件处理程序。还有一个按键，可以附加到窗口对象上：

for (i = 0; i < response.length; i++) {
  name = response[i].name;
  age = response[i].age;
  // do something with those values, add li elements, whatever you want
}

有关更多信息，请查看documentation。

Answer 3

您可以使用tabindex属性设置可聚焦的元素。

然后，当它可聚焦时，可以在其上设置keydown绑定。

当焦点对准它并按一个键时，它将触发事件处理程序。

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

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

Answer 4

您几乎可以将键盘事件（从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元素... < / p>

tabindex属性仅接受数字值。一个例子来说明：

tabindex="X"：此处的“ X”表示正数。随着“ X”的值变大，元素在TAB的可访问性方面失去了优先级，因此，tabindex="1"是第一个，与其他元素相比，它具有更大的优先级。

tabindex="0"：推荐值，当您按下TAB键时，可以保留页面中元素的顺序。

tabindex="-1"：这样，您就可以通过TAB键使元素不可访问，但是可以使它以编程方式集中（当您要创建一个可以通过以下方式关闭的模式弹出窗口时很有用） ESC键。

使用onkeydown或onkeyup触发功能而无需设置输入Javascript

4 个答案: