Ist es möglich, ein JavaScript-Tastendruckereignis nicht in einem Eingabe- oder TextArea-Tag auszulösen?

Question

Ich frage mich, ob Sie ein javascript Tastendruckereignis auslösen können, aber nicht in einem Eingabe-Textarea-Tag?

Was ich erreichen möchte, ist, wenn der Benutzer irgendeine Taste irgendwo auf der Seite drückt, wird eine Warnung angezeigt, die sagt: Sie drückten eine Taste.

Hier ist mein Code: http://codepen.io/willydev/pen/LkZAob

function pushbtn(event){ 
var x = event.keyCode; 
alert("You pressed"+x) 
} 

Ich bin nicht sicher, Ereignis-Listener oder verwenden wollen, wo ich sagen sollte.

Answer 1

Natürlich können Sie einfach delegieren die keypress Event-Handler der document:

function pushbtn(event) { 
 

 
    // retrieving the keyCode of the pressed key: 
 
    var keycode = event.keyCode, 
 

 
    // finding which letter was generated, using 
 
    // String.fromCharCode(): 
 
    key = String.fromCharCode(keycode); 
 
    console.log('You pressed ' + key + ' (keyCode: ' + keycode + ').'); 
 
} 
 

 
document.addEventListener('keypress', pushbtn);

body, 
 
html { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    margin: 0; 
 
    background-color: #f00; 
 
}

Wenn Sie diese keypress Ereignisse ausgelöst innerhalb <input> oder <textarea> Elemente ausschließen wollen:

function pushbtn(event) { 
 
    var keycode = event.keyCode, 
 
    key = String.fromCharCode(keycode), 
 

 
    // finding the element on which the event 
 
    // was originally fired: 
 
    source = event.target, 
 

 
    // an Array of element-types upon which 
 
    // the function should not fire (to prevent 
 
    // interfering needlessly with the UI and 
 
    // user-expectations): 
 
    exclude = ['input', 'textarea']; 
 

 
    // finding the element-type (tagName) of the element 
 
    // upon which the event was fired, converting it to 
 
    // a lower-case string and then looking in the Array 
 
    // of excluded elements to see if the element is held 
 
    // within (-1 indicates the string was not found within 
 
    // the Array): 
 
    if (exclude.indexOf(source.tagName.toLowerCase()) === -1) { 
 
    console.log('You pressed ' + key + ' (keyCode: ' + keycode + ').'); 
 
    } 
 
    return; 
 
} 
 

 
document.addEventListener('keypress', pushbtn);

body, 
 
html { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    margin: 0; 
 
    background-color: #f00; 
 
} 
 
input, 
 
textarea { 
 
    display: block; 
 
    width: 30%; 
 
    box-sizing: border-box; 
 
    margin: 0.5em 0 0 1em; 
 
}

<input /> 
 
<textarea></textarea>

Answer 2

Vielleicht:

document.onkeypress = function(event){ 

if(event.keyCode == 32){ 
document.write("Space key pressed"); 
}; 

}; 

Natürlich können Sie die keyCode Sie auf den Schlüssel je ändern müssen, oder die gesamte keyCode Abschnitt löschen, wenn Sie kümmern sich nicht, welche Taste gedrückt wird.

Hoffe, es hilft;)

Answer 3

Sie dies tun, können das Ereignis-Listener auf Dokument hinzufügen.

function pushbtn (event){ 
 
     var x = event.charCode; //not keyCode 
 
     alert("You pressed"+x); 
 
    } 
 

 
    //adding event listner on document 
 
    document.addEventListener('keypress', pushbtn);

Verwenden charCode statt keyCode aber noch keyCode geben Sie den Schlüsselcode des Schlüssels (Anzahl) Verwenden key es für Ihren Fall perfekt. -Code sieht wie dieses

function pushbtn (event){ 
 
     var x = event.key; 
 
     alert("You pressed :"+x); 
 
    } 
 

 
    //adding event listner on document 
 
    document.addEventListener('keypress', pushbtn);