impedisce la posizione del cursore di "freccia su" durante la reimpostazione della posizione del cursore all'interno della casella di testo

Question

Di recente ho aggiunto alcuni campi di inserimento intuitivo di testo all'app Web che sto supportando.

Grande affare, giusto? Non proprio, sembra che la tua app web non lo faccia: sei già in ritardo e i tuoi utenti finali si lamentano. (Almeno è così che è finita qui).

Quindi, la mia domanda ha a che fare con il tasto freccia "su".

La casella di testo previsionale ha un listener onkeyup.

Il gestore segna i tratti dei tasti e fa qualcosa in base al carattere inserito dall'utente.

Il tasto freccia su consente all'utente di navigare in un div creato con "suggerimenti". Ho diverse variabili di rilevamento indici, ecc ... Fondamentalmente, quando l'utente preme la freccia su cambierò l'id del div a un id che ha qualche css associato che farà apparire il div come se fosse selezionato. Inoltre prenderò il valore in quel div e lo assegnerò alla casella di testo in cui l'utente è in grado di digitare.

Il problema è estetico. In linea con tutte le caselle di testo che sto imparando, il tasto freccia su ripristinerà la posizione del cursore. Questo sta accadendo poco prima che io scriva il nuovo valore nel campo di testo.

Quindi, su ogni freccia su, l'utente vede un cursore che salta nella casella di testo (salterà all'inizio e immediatamente verrà visualizzato alla fine).

Ecco il codice -

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

La cosa divertente è - il "down" freccia funziona perfettamente da Di default il tasto Freccia giù posizionerà il cursore alla fine della stringa attualmente si trova nella casella di testo.

Ok, quindi le cose che ho già provato -

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

ho anche cercato di impostare la posizione del cursore prima di impostare il nuovo valore senza alcun risultato utilizzando una funzione setCursorPosition ho trovato su un altro post here. (Sì, stavo raggiungendo con questo)

Ho taggato questo come JavaScript e Jquery. Preferisco usare JavaScript, ma aperto anche a suggerimenti in Jquery!

Answer 1

Penso che quello che puoi fare è quando muovono il cursore, prendilo e scopri quale elemento è ... quindi memorizzalo in una variabile e focalizzalo() e cancellalo e poi metti il ​​valore che hai memorizzato di nuovo dentro

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

Questo funziona per me quando si verificano problemi di cursore strani in jquery/javascript per la maggior parte del tempo. Fare un tentativo e se non funziona, fammi sapere e vedrò cos'altro potrebbe essere sbagliato.

Answer 2

Come suggerito da Ryan. come ho ottenuto questo in 4.x angolare è

.html

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

Ts

keyDownEvent(event: any){ 

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