What is a function to have arrow keys move cursor?

JavaScript
1

What is a function to trigger the keyboard arrow keys (up, down, left and right) ie. to move the cursor(focus) to next input field across or down?

I made the crossword puzzle that is on your website, but would like to know how to navigate the cursor when the user presses one of the keyboard arrows(up,down,left,right).

Thanks,
Angela Jackson

2

Hi mr. Wilkins
I didn’t know how to post so what does moved mean

3

Hi Angela and welcome to the JavaScript forums.

It just means that it was posted in the wrong place at the end of an unrelated discussion. That would confuse people, so we’ve moved it to a better place where people can more easily find discuss your question.

I presume that it’s the following crossword puzzle that you are asking about?

1 Like
4

Yes, sir. Any help will be appreciated!!!
Angela Jackson

5

Okay, here’s some help. You can set an event on the keyup event, and when an appropriate key is pressed you can call a function to take an action.

Here’s some example code to get you going:

function cursorRight(cell) {
	cell.nextElementSibling.focus();
}
document.addEventListener("keyup", function (evt) {
	if (evt.key === "ArrowRight") {
		cursorRight(evt.target);
	}
});
6

Thanks for that bit of code.
Do you need three other functions: cursorleft, cursorup, cursordown and also three event listeners?
So you don’t use the keycodes 37(left),38(up), 39(right), 40(down)
Where does this function fit in the crossword puzzle code by Adrian Roworth
How I Built A Pure CSS Crossword
Thanks again
Angela Jackson

7

Only the one event listener is needed. You can add more if statements inside of it for the other arrows. Yes, other functions are needed for those other keys.

That was the old way. The better modern way leaves no confusion about which key is used for what.

Just put it in the JavaScript panel on his codepen example page.

8

I just went to his codepen page, where is the javascript panel, do I just type the code in? Please explain how to do this.
Thanks

9

At the end of the article, do you see where it says: “The full working CSS crossword Puzzle can be found here” ?

10

No. I must be at wrong page. After I type in this function can send you the full code for my puzzle for you to see if it works?

11

The correct page is this one: https://codepen.io/adrianroworth/pen/OpeyZq

There is no full code for the arrow key controls. That is something that has yet to be created for that CSS-based crossword puzzle.

I made a start by demonstrating with the simplest example, that right-arrow control. The code for other keys is a bit more complex, as navigating between elements is not a trivial task, and is something that I have left for you to attempt for yourself.

12

is this right to move arrow keys:

function cursorRight(cell) {
	cell.nextElementSibling.focus();
}
function cursorLeft(cell) {
	cell.nextElementSibling.focus();
}
function cursorUp(cell) {
	cell.nextElementSibling.focus();
}
function cursorDown(cell) {
	cell.nextElementSibling.focus();
}
function cursorBackspace(cell) {
	cell.nextElementSibling.focus();
}
function cursorDelete(cell) {
	cell.nextElementSibling.focus();
}
}
document.addEventListener("keyup", function (evt) {
	if (evt.key === "ArrowRight") {
		cursorRight(evt.target);
	}
                  if (evt.key === "ArrowLeft") {
		cursorLeft(evt.target);
	}
                  if (evt.key === "ArrowUp") {
		cursorUp(evt.target);
	}
                  if (evt.key === "ArrowDown") {
		cursorDown(evt.target);
	}
                  if (evt.key === "Backspace") {
		cursorBackspace(evt.target);
                  }
                  if (evt.key === "Delete") {
		cursorDelete(evt.target);
});
13

What happens when you use that code?

1 Like
14

No. I tried the code you gave earlier to move the right arrow, as well as the other arrow keys, and It did not work.

15

I’m sorry to have to correct you on this but the code that I gave to move the right arrow does work.

I present to the jury :slight_smile: , my evidence. https://codepen.io/pmw57/pen/OJyQyPo

2 Likes
16

Ok
You win!

1 Like
17

Now of course it could work much better than this. You’re welcome to try your JavaScript hand at improving the code.

In a separate investigation I found that DOM traversal isn’t a good solution, and tried using row/col as separate values. That didn’t provide clean or clear code though.

Instead, I found much better results by using ES6 tools to filter all of the available cells based on where I wanted to go. I recommend that you look in that direction as you write up code to let you use arrows.

18

Mr. Wilkins
I sent you the code I have so far, however this is just the html. I could not send here because there was a limit.
Could you please help me to make this work? I would like the up, right, down and left arrows to work, also the delete and backspace, if you make a mistake
Thanks

19

Then let’s work at getting those going one at a time. I recommend working on left right movement first, as that becomes useful later on with backspace and delete too.

Do you know much about JavaScript programming to make progress on those?

20

I’m afraid not but I am learning. I have been working on trying to make this puzzle for a very long time.