Redirecting an event to another element using jQuery

Question

I am doing grid management in HTML / JS and I would like it to work as much as possible, like Excel. I already have most of the navigation and editing, but I can’t understand anything, and everything I found on the Internet does not work in my case.

First, I will explain a little how I implemented it: I made a grid using a table and inserted a text field in each td. Text fields do not get focus unless you double-click on a cell (as in Excel). In other words, clicking on a cell simply selects it, and you can edit it by double-clicking. You can navigate the arrow keys, this was done by attaching a key event handler in the document.

Now that the cell is selected, I would like it to be easy to edit by typing. To do this, I added code to the event handler, which controls the navigation, which checks whether the user enters visible characters (e.charCode! = 0) and sets the focus in the text field of the selected cell. This works fine, except that the first character the user enters does not receive a text field. Apparently, a trigger is a way; that's what i tried so far

self.editCell.trigger(jQuery.Event('keypress', {which: e.charCode})); 

I tried passing more parameters like keyCode, charCode ... etc. without success.

So, what would be the best way to pass a keystroke to an input control?

Answer 1

The only behavior that you change is that you want to move between other cells using the arrow keys, right?

Instead of performing actions on the white list, why don't you just let your own code handle the hard work and only detect the use of the arrow keys?

sort of:

 function cellKeyDown(e) { if (e.keyCode > 36 && e.keyCode < 40) { // select a new cell } }