CODEWITHSUNDEEP
javascripthtmlcss
Vlad Nicula
Vlad Nicula

Reputation: 3726

Arrow keys not working in input and textarea

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!

Upvotes: 10

Views: 18456

Answers (4)

Joseph Budin
Joseph Budin

Reputation: 1360

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.

Upvotes: 1

Nicolas Eliaschev
Nicolas Eliaschev

Reputation: 1

You can also look up for stuff like:

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

or

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

Upvotes: 0

Chris Michaelides
Chris Michaelides

Reputation: 770

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.

Upvotes: 0

Jules
Jules

Reputation: 7223

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();

Upvotes: 17

Related Questions