Function Keys
 

Function Keys

To handle Function key-presses in HTML the following code can be used: (AI again!)

Press a key to see the result here.

<script>
document.addEventListener("keydown", function(event) {
const output = document.getElementById("output");

// Check if the key pressed is a function key (F1–F12)
if (event.key.startsWith("F") && !isNaN(event.key.slice(1))) {
output.textContent = `You pressed ${event.key}`;
event.preventDefault(); // Prevent default browser behavior (e.g., F1 opening help)
}
});
</script>
Top

isNaN()

Links

Link to PDF Disabled

If you require a copy please email tempusfugit.me.uk

Top

References - a note on these

  • Keyboard_event_key_values - https:// developer.mozilla.org/en-US/docs/Web/API/ UI_Events/ Keyboard_event_key_values
  • JavaScript isNaN() - https:// www.w3schools.com/jsref/ jsref_isNaN.asp

Site design by Tempusfugit Web Design -