jquery,javascript: change input value on keyup - keep cursor position at the end but

Question

hey guys, i'm facing a little annoying bug that's in my case not really userfriendly.

The user is able to set values of an inputfield with the Up and Down Arrow keys. The focus is always set to the input field so the user is able to type after he has selected a value with the Arrow keys.

I want the Cursor Position to ALWAYS REMAIN at the last character of the input value so the user can type immediately after selecting a value via the arrow keys. That works just fine if you hit the down-arrow key because in that case the cursor automatically jumps to the end of the input-box.

Exactly the opposite happens if you press the up key - the cursor jumps to the beginning. I was able to fix that with a "setCursorPosition" Script i found here on stackoverflow.

However, despite the fact that it's working the user cannot really "feel and see" it. If I press the Up-Arrow key the cursor is still shown at the beginning of the input-value. As soon as I start typing the cursor jumps to the end and it works fine.

See it here: http://jsfiddle.net/3UHVY/1/

So I wonder if you have a solution so the cursor may always remain at the end of the input box when i hit the up or down arrow key and it's also visible and logic for the user. Right now the user might think he has to grab the mouse and jump right back to the input box to set the cursor to the end.

You are rewriting default textbox-behaviour to enhance user experience? I doubt if that makes sense since the user expects a different behaviour. — Caspar Kleijne
– Caspar Kleijne, Commented Jan 16, 2011 at 8:26
Also this annoyed me because Opera automatically gave me a dropdown of irrelevant stuff when I clicked the down button... — jcuenod
– jcuenod, Commented Jan 16, 2011 at 8:30
@j3frea you might be able to stop that behaviour with autocomplete="off" — matt
– matt, Commented Jan 16, 2011 at 8:34
Autocomplete is a useful feature to me. So you need to turn it off for the input box then, not me. I'm with Caspar here. — jcuenod
– jcuenod, Commented Jan 17, 2011 at 8:49

Jeff · Accepted Answer · 2011-01-16 08:40:19Z

1

You can suppress the browser's default up-key behavior by returning false on key up:

if(e.keyCode === 38)
    return false;

http://jsfiddle.net/3UHVY/5/

Alternatively, if that doesn't satisfy your needs, you can hook on the keyUp event and move the cursor to the end of the input.

answered Jan 16, 2011 at 8:40

Jeff

5,0431 gold badge35 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery,javascript: change input value on keyup - keep cursor position at the end but

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related