prevent “up arrow” key reseting cursor position wi

Question

I recently added some predictive text input fields to the web-app I am supporting.

Big deal, right? Not really, seems like if your web-app doesn't do this -- you are already behind the times and your end-users are complaining. (At least that's how it is over here).

So, my question has to do with the "up" arrow key.

The predictive textbox has a onkeyup listener.

The handler segregates the key strokes and does something depending on the character the user entered.

The up arrow key allows the user to navigate in a div I created loaded with "suggestions." I have several variables tracking indexes, etc... Basically, when the user hits the up arrow I will change the id of the div to an id that has some css associated with it that will make the div appear as though it is selected. Additionally I will grab the value in that div and assign it to the textbox where the user is able to type.

The problem is an aesthetic one. Inherently with all text boxes I am learning, the up arrow key will reset the cursor position. This is happening just before I am writing the new value to the text field.

So, on each up arrow stroke, the user is seeing a jumping cursor in the textbox (it will jump to the beginning and immediately it will appear at the end).

Here's the code -

if (event.keyCode === 38 && currentUserInput.length > 0) {

    // user has toggled out of the text input field, save their typing thus far
    if (currentToggledIndex == -1) {
        currentToggledIndex = autoFillKeywordsList.length-1;
        savedKeywordUserInput = currentUserInput;
    }
    else {
        // revert currently selected index back to its original id
        document.getElementById("kw_selected").id = "kw_" + currentToggledIndex ;

        // user has toggled back into user input field
        if (currentToggledIndex == 0) {
            currentToggledIndex = -1;
        }

        // user has toggled to the next suggestion
        else {
            currentToggledIndex--;
        }
    }
    // 2. Determine next action based on the updated currentToggledIndex position
    // revert the user input field back to what the user had typed prior to 
    // toggling out of the field
    if (currentToggledIndex == -1) {
        element.value = savedKeywordUserInput;
    }
    // mark the toggled index/keyword suggestion as "selected" and copy 
    // its value into the text field
    else {
        document.getElementById("kw_"+currentToggledIndex).id = "kw_selected";            
        element.value = autoFillKeywordsList[currentToggledIndex];
    }
    // 3. Determine what the user can do based on the current value currently 
    // selected/displayed
    displayAppropriateButtonActions(element.value);
}

The funny thing is - the "down" arrow works perfectly since by default the down arrow key will place the cursor at the end of the string currently located in the textbox.

Ok, so things that I have already tried -

event.preventDefault(); event.stopPropogation();

I also tried to set the cursor position PRIOR to setting the new value to no avail using a setCursorPosition function I found on another post here. (Yeah, I was reaching with this one)

I tagged this as JavaScript and Jquery. I prefer to use JavaScript, but open to suggestions in Jquery too!

Answer 1

I think what you can do is when they move the cursor, grab that and find out what element it is ... then store it in a variable and focus() it and erase it and then put the value you stored back into it.

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

This works for me when having weird cursor issues in jquery/javascript most of the time. Give it a try and if it doesn't work, let me know and I'll see what else might be wrong.

Answer 2

As Ryan suggested. how I achieved this in angular 4.x is

.html

<.. (keydown)="keyDownEvent($event)" >

.ts

keyDownEvent(event: any){

if (event.keyCode === 38 && event.key == "ArrowUp")
{
 event.preventDefault();
 //logic..
}