3

Is it possible, using JavaScript, to prevent arrow keys from scrolling a page (horizontally, in this example), yet still allowing the arrow keys to move the cursor within a text field?

For example - I have a text input in a super-wide <div>, and when I use arrow keys to move the cursor to the end of the text, it will then scroll the page horizontally.

I know that I can use event.preventDefault(); to prevent the default behavior, but this also prevents the cursor from moving. I've also tried e.stopPropagation();, which doesn't seem to do the trick either.

Is it possible to do this, or will I have to use e.preventDefault(); and then manually move the cursor position with JavaScript as well? I'm hoping for a simpler solution that that. :)

Here's a JSFiddle demonstrating my issue: http://jsfiddle.net/h6ug57u0/

EDIT:

I should note that I'm only trying to achieve this behavior when there is focus in an input. Otherwise, I don't want to hamper with the browser's default behavior - I know many users use the arrow keys to scroll.

lhan
  • 4,585
  • 11
  • 60
  • 105
  • FYI, the behaviour seems to be browser dependent. Tested your fiddle in IE11 which does *not* scroll the div, while Chrome behaves as you described. – Culme Nov 18 '15 at 16:12
  • Yep, I'm seeing that too now. Hadn't tried that. Leave it to IE to be different... – lhan Nov 18 '15 at 16:13
  • I can see how this would be annoying in some situations, but you should be very careful about intending to override default browser behavior. You never know when you're going to interfere with something you didn't mean to, or even mess up a disabled user's special navigation software. – Katana314 Nov 18 '15 at 16:36

2 Answers2

2

Maybe you need check position of input caret for analyse if you e.preventDefault() or not.

Fallow a example:

http://jsbin.com/cunidinuvo/edit?html,js,output

Lai32290
  • 8,062
  • 19
  • 65
  • 99
  • 1
    Hadn't thought of this... interesting. It does seem to work well. I'll give this a shot! thanks – lhan Nov 18 '15 at 16:39
  • This seems to be the way to go. I had to make one small adjustment (not with your code), but I forgot I'm actually using a `contentEditable` div so I found a good example of getting the caret position of a `contentEditable` element here: http://stackoverflow.com/questions/3972014/get-caret-position-in-contenteditable-div – lhan Nov 18 '15 at 16:53
  • great! I don't have imagine this case, really great! – Lai32290 Nov 18 '15 at 16:56
0

Why don't you just add an onkeypress event handler to the textbox, and then check for arrow keys?

David P
  • 2,027
  • 3
  • 15
  • 27
  • If you refer to the JSFiddle link I provided, I've tried that with `onkeydown` - not sure if there's a significant difference between that and `onkeypress` - but even if I check for the arrow keys here, then what? If I `e.preventDefault();`, the arrow keys won't move the cursor in the text input. – lhan Nov 18 '15 at 16:18
  • If you do a preventDefault, you can always manually move the cursor by using the selectionStart property of the textbox. – David P Nov 18 '15 at 16:24
  • Yep - I know I can do it that way, as I noted above, but it seems tedious. I was just hoping to find any solutions here that I may not have thought of. – lhan Nov 18 '15 at 16:38