CodingNic

Events & Keyboard Input

Handle Invalid Keyboard Input

Events & Keyboard Input 15 min read

Handle Invalid Keyboard Input

Task

Make sure unrelated keyboard keys do not interfere with the calculator.

The handler should simply ignore unsupported keys.

Open

Open:

js/ui.js

Test the current keyboard handler with keys such as:

  • a
  • Tab
  • ArrowUp
  • Shift
  • Control

Do not add calculator behavior for these keys.

For navigation keys such as Tab, allow the browser to keep its normal behavior.

The only key that should currently need preventDefault() is the calculator action where the browser’s default behavior would interfere, such as Enter.

Test

Click the calculator and then press unrelated keys.

Confirm:

  • the displayed number does not change
  • no unexpected calculation occurs
  • the browser console remains free of errors
  • keyboard navigation still works

Checkpoint

The keyboard layer responds only to supported calculator keys and leaves unrelated browser input alone.