Javascript-Zähler auf Tasteneingabe statt Taste?

Also habe ich diesen Zähler, der "positive" und "negative" Werte erhöht, es funktioniert gut. Jetzt möchte ich auch eine Tastaturtaste zuweisen, um die Werte zu erhöhen, "f" für negativ und "j" für positiv. Wie mache ich das? Ich habe an onkeypress/onkeyup gegriffen, aber es ist immer noch verwirrend.Javascript-Zähler auf Tasteneingabe statt Taste?

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

fand ich die Lösung dieses durch Zugabe von:

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

Quelle

2017-07-09 Rizki Hadiaturrasyid

Sie möchten die Funktion 'modify_qtyn' auslösen, wenn die Tastatur gedrückt wird? –

Mögliches Duplikat von [Einfachster Weg, um in JavaScript Tastenanschläge zu erkennen] (https://stackoverflow.com/questions/16089421/simplet-way-to-detect-keypresse-in-javascript) – Dekel

@RostyslavKuzmovych ja, im Grunde zuweisen, dass zu einem Taste. –

Sie das Ereignis keypress im Tag <body> oder sogar im window verwenden können. Überprüfen Sie die Dokumentation dieses event.

<body onkeypress="func(event)">

oder

window.addEventListener('keypress', func);

sor in diesem func lesen Sie die event.key als erster Parameter übergeben, um zu überprüfen, ob Buchstaben "f" oder "j" ist.

Quelle

2017-07-09 16:54:22

http://keycode.info/ das ist Website, die ich verwenden, um Schlüsselcodes zu erkennen :) –

Sie haben Ereignis-Listener zu Ihrem Dokument hinzufügen, für keypress zu hören,

document.onkeypress = function (e) { 
    if(e.keyCode == 70){ 
     modify_qtyn(1); 
    } 
    if(e.keyCode == 74){ 
     modify_qtyn(-1); 
    } 
};

Quelle

2017-07-09 17:01:22

Methode 1: Eingabetyp an die Nummer: addEventListener

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

Methode 2 bis Body- Verwenden Sie die Pfeiltaste

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

Quelle

2017-07-09 17:01:57

Ich habe folgende Lösung gefunden:

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

Quelle

2017-07-09 19:30:47

Javascript-Zähler auf Tasteneingabe statt Taste?

Antwort

Verwandte Themen