Javascript counter on key input instead of button?

Question

So I have this counter that increments 'positive' and 'negative' values, it's working fine. Now I also want to assign keyboard key to increment the values, 'f' for negative and 'j' for positive. How do I do this? I have been fiddling with onkeypress/onkeyup but it is still confusing.

<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>

I found the solution by adding this:

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);}
   };
};

you want to trigger function modify_qtyn when keyboard key is pressed ? — Rostyslav Kuzmovych
– Rostyslav Kuzmovych, Commented Jul 9, 2017 at 16:50
Possible duplicate of Simplest way to detect keypresses in javascript — Dekel
– Dekel, Commented Jul 9, 2017 at 16:51

Henrique Oecksler Bertoldi · Accepted Answer · 2017-07-09 16:54:22Z

1

You can use the event keypress in the tag <body> or even in the window. Check the documentation of this event.

<body onkeypress="func(event)">

or

window.addEventListener('keypress', func);

sor in this func you read the event.key passed as the first parameter to verify if is letter "f" or "j".

answered Jul 9, 2017 at 16:54

Henrique Oecksler Bertoldi

1,0547 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fazal Rasel · Accepted Answer · 2017-07-09 17:01:57Z

0

method 1: addEventListener to 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);
   }
});

method 2: input type to number to use arrow key

<input id="qtyn" value="0" type="number"/>

answered Jul 9, 2017 at 17:01

Fazal Rasel

4,5262 gold badges23 silver badges32 bronze badges

Comments

Rizki Hadiaturrasyid · Accepted Answer · 2017-07-09 19:30:47Z

0

I found the solution by adding this:

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);}
   };
};

answered Jul 9, 2017 at 19:30

Rizki Hadiaturrasyid

1561 silver badge10 bronze badges

Collectives™ on Stack Overflow

Javascript counter on key input instead of button?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related