Arrow keys not working in input and textarea

Question

I have a simple textarea and input in my webapplication. For some reason, I cannot go back in the typed text with the arrow keys. The input cursor does not move backwards.

I can however use ctrl+a, or click the with the mouse on the position that I want to edit. This is confusing. I am not using e.preventDefault in any key event in my code - having around 30 js files and some huge css files -.

Any ideas on why the arrows might not work?

Thanks!

First isolate the problem by removing succesive js files until arrow keys work again - than come back with the results. — WTK, Feb 17 '12 at 09:08
@WTK Good point, I'll try to remove files on a dummy page until they work. I might start with the css first. — Vlad Nicula, Feb 17 '12 at 09:09
@Jleagle thanks, never thought of that, will try and come back with the result. — Vlad Nicula, Feb 17 '12 at 09:10

score 17 · Accepted Answer · answered Feb 17 '12 at 09:11

17

Do a search in all your JS files and look for something similar to:

keyCode == 37

or

which == 37

as this is the left-arrow. Probably somewhere there is something similar to:

if (e.keyCode == 37)
   e.preventDefault();

answered Feb 17 '12 at 09:11

Jules

7,148
6
26
50

that's it. After searching in the content of my js file I found that I had a dropdown menu component which was preventing the defaults of (33, 34, 35, 36, 37, 38, 39, 40). Thanks! – Vlad Nicula Feb 17 '12 at 09:17
1

I was skeptical when I first saw this answer. Then I tried what you said. Turns out you were right. Mind blown. – taylorstine Oct 06 '16 at 21:57
this saved me a ton of time, Thanks – Zeeshan Adil Jul 18 '18 at 09:27

score 0 · Answer 2 · answered Mar 19 '14 at 14:58

Just to add a comment to help people loading input and textareas inside a lightbox. Most lightboxes bind the arrow keys to photo navigation (previous,next), so the arrow keys will not work in your form fields.

To fix that, just search the javascript code of your lightbox for the keycodes (as Jules suggested) and remove the code block that binds the arrow keys. Or you can condition it.

For example, in right-lightbox.js the keybinding code is

var b=p.current,c=({27:"close",33:"prev",37:"prev",38:"prev",39:"next",40:"next",34:"next"})[a.keyCode];

27 is the escape key, so you can leave that there, and remove the rest.

score 0 · Answer 3 · answered Jan 04 '22 at 16:16

0

You can also look up for stuff like:

@HostListener('keydown.arrowup', ['$event']) keyUp(event) {

or

@HostListener('keydown.arrowdown', ['$event']) keyUp(event) {

answered Jan 04 '22 at 16:16

Nicolas Eliaschev

1
2

score 0 · Answer 4 · answered Mar 30 '23 at 08:30

As stated in this comment, a good way of debugging this issue can be the Developer tool : select the textarea that is problematic (using ctrl + shift + C for instance) and go to the Event listeners tab.

I found the origin of the behaviour under the keydown category. As expected, it was a e.preventDefault(); that I had somehow previously missed.

Arrow keys not working in input and textarea

4 Answers4

Linked