How to Simulate a Keyboard Event in React onClick?

Question

I am Currently in process of Developing a on screen handler for my Web application using React and i am facing some problem in creating events for backspace and arrow on screen keys.

I have a layout like this

I was looking at a coupler of questions which used jquery but i also came across multiple SO questions which said its a bad practise to use jquery with React because of the virtual DOM concept react uses .

How to trigger backspace on a textfield?

How to use JQuery with ReactJS

How do i simulate the events of backspace and arrow left and right buttons from the onscreen controls using React or pure JS.

Update

I donot want to have to trigger the on screen button based on keypress, its the other way around. I want to click the onscreen button which trigger the event for the keyboard press automatically and does the necessary event on input.

If you are using redux or any other state management system, all you have to do is dispatch an action. If not, you can try to register a keypress event on container and then using refs, call click of that button — Rajesh Dixit
– Rajesh Dixit, Commented Sep 18, 2019 at 6:27
@Rajesh I want it independent of redux just on component level i want this functionality . can you elaborate your comment a bit more — Rahul Singh
– Rahul Singh, Commented Sep 18, 2019 at 6:29
Idea is to have a unified way to handle stuff. So since you have button clicks, you can trigger of necessary button based on keypress using refs. Somethinhg like this.refs.button_backspace.click() — Rajesh Dixit
– Rajesh Dixit, Commented Sep 18, 2019 at 6:36
@Rajesh I think you are getting it a bit wrong, I donot want to have to trigger the on screen button based on keypress, its the other way around. I want to click the onscreen button which trigger the event for the keyboard press automatically — Rahul Singh
– Rahul Singh, Commented Sep 18, 2019 at 6:41

Avanish Pai · Accepted Answer · 2019-09-18 08:46:15Z

1

Try to dispatch a KeyboardEvent with corresponding keycodes for from the onClick handler of each of these buttons. You would find the keycodes here https://keycode.info/

answered Sep 18, 2019 at 8:46

Avanish Pai

742 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman Mkrtchian · Accepted Answer · 2021-05-27 15:13:22Z

-1

Once you capture the Backspace key click event which you showed on the UI. You can try dispatching an event like this .Try using this code inside your click handler.

// keycode 32 is for space event
// keycode 8 is for backspace event

var backspaceEvnt = new KeyboardEvent('keydown' : {'keyCode': 8, 'which': 8});
var spaceEvnt = new KeyboardEvent('keydown' : {'keyCode': 32, 'which': 32});
document.dispatchEvent(backspaceEvnt);
document.dispatchEvent(spaceEvnt);

edited May 27, 2021 at 15:13

Roman Mkrtchian

3,0251 gold badge22 silver badges26 bronze badges

answered Sep 18, 2019 at 9:14

karthik vishnu kumar

1,02110 silver badges17 bronze badges

1 Comment

alex Over a year ago

FYI that should be two arguments, now a key value pair. new KeyboardEvent('keydown', {'keyCode': 8, 'which': 8}) should work instead.

Collectives™ on Stack Overflow

How to Simulate a Keyboard Event in React onClick?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related