键输入上的Javascript计数器而不是按钮？_Javascript_Counter

键输入上的Javascript计数器而不是按钮？

javascript

键输入上的Javascript计数器而不是按钮？,javascript,counter,Javascript,Counter,所以我有一个计数器，它可以增加“正”和“负”值，工作正常。现在我还想分配键盘键来增加值，'f'表示负数，'j'表示正数。我该怎么做？我一直在摆弄onkeypress/onkeyup，但它仍然令人困惑 <html> <head> <script type="text/javascript"> function modify_qty(val) { var qty = document.getElementById('qty').value; var new_q

所以我有一个计数器，它可以增加“正”和“负”值，工作正常。现在我还想分配键盘键来增加值，'f'表示负数，'j'表示正数。我该怎么做？我一直在摆弄onkeypress/onkeyup，但它仍然令人困惑

<html>
<head>
<script type="text/javascript">

function modify_qty(val) {
var qty = document.getElementById('qty').value;
var new_qty = parseInt(qty,10) + val;

if (new_qty < 0) {
    new_qty = 0;
}

document.getElementById('qty').value = new_qty;
return new_qty;
}

function modify_qtyn(val) {
var qtyn = document.getElementById('qtyn').value;
var new_qtyn = parseInt(qtyn,10) + val;

if (new_qtyn < 0) {
    new_qtyn = 0;
}

document.getElementById('qtyn').value = new_qtyn;
return new_qtyn;
}

</script>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>

<div class="box">    
    <label for="Positive"><abbr title="Positive">Qty</abbr></label>
    <label for="Negative"><abbr title="Negative">Qtyn</abbr></label>
    <input id="qtyn" value="0" />
    <input id="qty" value="0" />
    <button id="down" onclick="modify_qtyn(1)">MINUS</button>
    <button id="up" onclick="modify_qty(1)">PLUS</button>


</div>

</body>
</html>

您可以在标签

中甚至在

窗口中使用事件按键。检查此文件的文档
sor在此func
中，您将读取作为第一个参数传递的事件。key
用于验证是字母“f”还是“j”。
方法1：将EventListener添加到body-
document.addEventListener('keypress', function(e){
  console.log(e.which) 
  if(e.which==70){ // 102
     modify_qtyn(1);
   }else if(e.which == 74){ // 106
     modify_qtyn(-1);
   }
});

方法2：输入数字类型以使用箭头键
<input id="qtyn" value="0" type="number"/>

我通过添加以下内容找到了解决方案：
function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
    var key = code(e);
    if (key==102) {modify_qtyn(1);}
    if (key==70) {modify_qtyn(1);}
    if (key==106) {modify_qty(1);}
    if (key==74) {modify_qty(1);}
   };
};

function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
    var key = code(e);
    if (key==102) {modify_qtyn(1);}
    if (key==70) {modify_qtyn(1);}
    if (key==106) {modify_qty(1);}
    if (key==74) {modify_qty(1);}
   };
};

您想在按下键盘键时触发函数modifyqtyn？可能重复@RostyslavKuzmovych是的，基本上将其分配给按钮。@RizkiHadiaturrasyid下面没有正确答案
<input id="qtyn" value="0" type="number"/>

function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
    var key = code(e);
    if (key==102) {modify_qtyn(1);}
    if (key==70) {modify_qtyn(1);}
    if (key==106) {modify_qty(1);}
    if (key==74) {modify_qty(1);}
   };
};