添加按键事件

Question

我有一个问题。我已经用HTML和vanilla JS制作了一个小网站来充当计数器。它工作正常，但我想添加一个函数，允许用户通过在数字键盘中按"+"或"-"从计数器中添加或减去 1。

在 vanilla JS 中执行此操作的最简单方法是什么？

Answer 1

当然，只需附加到 keyup 事件并在按下正确的键时递增或递减值即可。

var value = 0;
document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector(".valueHolder").innerHTML = value;
  
 });
document.addEventListener("keyup", function(event) {
  
  if (event.which == "187" || event.which == "107") { // + key
    value++;
  }
  if (event.which == "189" || event.which == "109") { // - key
    value--;
  }
  
  document.querySelector(".valueHolder").innerHTML = value;
    
  
console.log(event.which);
});

<div class="valueHolder"></div>

Answer 2

您需要在文档上添加事件侦听器

document.addEventListener('keydown', myFunction);
function myFunction(e) {
    var keyCode = e.keyCode();
    ...
}

您需要查找将使用的键的键代码（+和-），并将该值与keyCode进行比较。然后使用条件执行加法或减法。

Answer 3

您将创建一个事件处理程序，该处理程序将根据按下的键在全局变量中添加或减去，如下所示：

window.counter=0;
function key(ev){
  if(ev.keycode==107) window.counter++;
  if(ev.keycode==109) window.counter--;
}
document.onkeypress = key;