CODEWITHSUNDEEP
javascriptreactjstypescript
Bill
Bill

Reputation: 5150

React: Detect delete key pressed on canvas

I can get the onKeyPress event to fire from the canvas

         <canvas
            id='canvas'
            ref={canvasRef}
            className='canvas'
            tabIndex={0}
            onKeyPress={(e: React.KeyboardEvent) => setKeyDown(e)}
          />

But the setKeyDown function thst recieves the event doesnt seem to fire when I press delete while other keys do log values, I want to know if the delete key was pressed.

  const setKeyDown = (event: React.KeyboardEvent<Element>) => {
    console.log(event.keyCode);
    console.log(event.key);
  };

I have tried using any as the type but I get the same results

Upvotes: 0

Views: 1646

Answers (2)

Pallikondan
Pallikondan

Reputation: 76

You need to capture onKeyDown event

your event handler be like

   onDelete = (e) => {
    if (e.keyCode === 46) {
        alert(e.keyCode);
    }
};

Keycode for delete key is 46

Upvotes: 0

Subin Sebastian
Subin Sebastian

Reputation: 10997

onKeyPress doesn't capture the delete key. To capture delete key presses use onKeyDown event.

onKeyDown={(e: React.KeyboardEvent) => setKeyDown(e)}

Upvotes: 2

Related Questions