在不设置输入的情况下使用 onkeydown 或 onkeyup 触发功能 Javascript

Question

现在我有这个：

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

但是我可以在输入之外使用 onkeydown='changeColor()' 吗？所以用户什么都看不到，但当他们按下一个键时，会触发 changeColor 函数？

Answer 1

您可以将 'keydown' 和 'keyup' 事件与文档或 window 对象一起用于该目的。

Answer 2

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

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

更多信息请查看 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 元素。 .

tabindex 属性只接受数值。举例说明：

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

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

tabindex="-1"：这样，您可以通过 TAB 键使元素不可访问，但可以通过编程方式使其可聚焦（当您想要制作可以关闭的模态弹出窗口时很有用使用 ESC 键）。

在不设置输入的情况下使用 onkeydown 或 onkeyup 触发功能 Javascript

use onkeydown or onkeyup to trigger a function without setting up an input Javascript

javascript

onkeydown