javascript - prevent "up arrow" key reseting cursor position within textbox -

i added predictive text input fields web-app supporting.

big deal, right? not really, seems if web-app doesn't -- behind times , end-users complaining. (at least that's how on here).

so, question has "up" arrow key.

the predictive textbox has onkeyup listener.

the handler segregates key strokes , depending on character user entered.

the arrow key allows user navigate in div created loaded "suggestions." have several variables tracking indexes, etc... basically, when user hits arrow change id of div id has css associated make div appear though selected. additionally grab value in div , assign textbox user able type.

the problem aesthetic one. inherently text boxes learning, arrow key reset cursor position. happening before writing new value text field.

so, on each arrow stroke, user seeing jumping cursor in textbox (it jump beginning , appear @ end).

here's code -

if (event.keycode === 38 && currentuserinput.length > 0) {      // user has toggled out of text input field, save typing far     if (currenttoggledindex == -1) {         currenttoggledindex = autofillkeywordslist.length-1;         savedkeyworduserinput = currentuserinput;     }     else {         // revert selected index original id         document.getelementbyid("kw_selected").id = "kw_" + currenttoggledindex ;          // user has toggled user input field         if (currenttoggledindex == 0) {             currenttoggledindex = -1;         }          // user has toggled next suggestion         else {             currenttoggledindex--;         }     }     // 2. determine next action based on updated currenttoggledindex position     // revert user input field user had typed prior      // toggling out of field     if (currenttoggledindex == -1) {         element.value = savedkeyworduserinput;     }     // mark toggled index/keyword suggestion "selected" , copy      // value text field     else {         document.getelementbyid("kw_"+currenttoggledindex).id = "kw_selected";                     element.value = autofillkeywordslist[currenttoggledindex];     }     // 3. determine user can based on current value      // selected/displayed     displayappropriatebuttonactions(element.value); } 

the funny thing - "down" arrow works since default down arrow key place cursor @ end of string located in textbox.

ok, things have tried -

event.preventdefault(); event.stoppropogation();

i tried set cursor position prior setting new value no avail using setcursorposition function found on post here. (yeah, reaching one)

i tagged javascript , jquery. prefer use javascript, open suggestions in jquery too!

i think can when move cursor, grab , find out element ... store in variable , focus() , erase , put value stored it.

var holdme = $("#myelement").val(); $("#myelement").focus().val('').val(holdme); 

this works me when having weird cursor issues in jquery/javascript of time. give try , if doesn't work, let me know , i'll see else might wrong.