Wie Javascript-Ereignis auf Tastendruck der Funktionstasten in der Tastatur aufrufen?

Question

Ich bin sehr neu in Javascript, Grundsätzlich möchte ich ein einfaches JavaScript-Ereignis auf Tastendruck von Funktionstasten in der Tastatur aufrufen. Der folgende Code bietet das aktuelle Datum und die Uhrzeit auf Knopfdruck. Ebenso können wir ein JavaScript-Ereignis beim Tastendruck der Funktionstasten aufrufen?

<input type = "text" onkeypress="document.getElementById('demo').innerHTML=Date()">The time is? 
 

 
<p id="demo"></p>

Answer 1

Es ist sehr einfach, es ist ein onkeypress Ereignis:

<button onkeypress="document.getElementById('demo').innerHTML=Date()">The time is?</button> 
 

 
<p id="demo"></p>

Ich denke, dies ist nicht eine Erklärung erfordert.

Answer 2

Sie müssen nur einen Event Listener verwenden und dann nach Schlüsselcode filtern.

document.addEventListener("keydown", function(event) { 
 
    event.preventDefault(); 
 
    switch (event.which) { 
 
    case 112: 
 
     setMessage("You just pressed F1!"); 
 
     break; 
 
    case 113: 
 
     setMessage("You just pressed F2!"); 
 
     break; 
 
    case 114: 
 
     setMessage("You just pressed F3!"); 
 
     break; 
 
    case 115: 
 
     setMessage("You just pressed F4!"); 
 
     break; 
 
    case 116: 
 
     setMessage("You just pressed F5!"); 
 
     break; 
 
    case 117: 
 
     setMessage("You just pressed F6!"); 
 
     break; 
 
    case 118: 
 
     setMessage("You just pressed F7!"); 
 
     break; 
 
    case 119: 
 
     setMessage("You just pressed F8!"); 
 
     break; 
 
    case 120: 
 
     setMessage("You just pressed F9!"); 
 
     break; 
 
    case 121: 
 
     setMessage("You just pressed F10!"); 
 
     break; 
 
    case 122: 
 
     setMessage("You just pressed F11!"); 
 
     break; 
 
    case 123: 
 
     setMessage("You just pressed F12!"); 
 
     break; 
 
    } 
 
}) 
 

 
function setMessage(msg) { 
 
    document.querySelector('.demo').innerHTML = msg; 
 
}

<div class="demo">Press a function button</div>