添加按键事件

Question

我有一个问题。我在HTML和vanilla JS中创建了一个小型站点，作为一个计数器。它工作正常，但我想添加一个函数，允许用户通过在数字键盘上按“+”或“ - ”键来添加或减少1。

什么是最简单的方法来做到这一点在香草JS？

Answer 1

您将要在文档

document.addEventListener('keydown', myFunction); 

function myFunction(e) { 
    var keyCode = e.keyCode(); 
    ... 
} 

你要查找的键码为你将要使用的键添加event listener（+和 - ）和值与keyCode。然后使用条件来执行你的加或减。

Answer 2

您可以创建一个事件处理程序，它会从一个全局变量基于按下键增加或减少，像这样：

window.counter=0; 
 

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

 
document.onkeypress = key;

Answer 3

当然，只是连接到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>