Le curseur de TextInput se déplace automatiquement vers l'avant lorsqu'il retrouve le focus.

Question

J'ai ce comportement vraiment bizarre

Voici une version simplifiée de mon code :

DOWN = 40;
UP = 38;

$(document).on("keydown", "#text_input", function(e) {
    if (e.keyCode == DOWN) {
        $("#list").focus();
    }
});

$(document).on("keydown", "#list", function(e) {
    if (e.keyCode == UP) {
        $("#text_input").focus();
    }
});

Donc, en gros, si l'utilisateur appuie sur la touche DOWN alors que "#text_input" a le focus, le focus se déplace vers "#list". À son tour, lorsque l'utilisateur a le focus sur "#list" et qu'il appuie sur la touche UP, "#text_input" retrouve son focus.

Cela fonctionne bien, SAUF que le curseur dans l'élément "#text_input" se déplace automatiquement vers l'avant de la valeur texte lorsqu'il retrouve le focus. Je veux empêcher cela pour que l'utilisateur puisse continuer à taper là où il s'est arrêté avant de mettre le focus sur la "#list".

J'ai cherché sur Stackoverflow un moyen de déplacer le curseur à la fin de la saisie de texte, et j'ai trouvé cette solution :

$(document).on("focus", "#text_input", function() {

    value = $("#text_input").val();
    $("#text_input").val("");
    $("#text_input").val(value);

});

Cela a effectivement déplacé le curseur à la fin UNIQUEMENT LORSQUE j'ai changé le focus en utilisant l'événement Mouse. Par exemple, lorsque j'ai CLIQUÉ sur la partie vide de la page, puis RECLIQUÉ sur l'entrée "#text_input", le curseur s'est déplacé jusqu'à la fin de l'entrée.

Cependant, bizarrement, cela ne fonctionne pas lorsque je rétablis la mise au point en utilisant ma fonction, à savoir appuyer sur la touche DOWN puis sur la touche UP. Le curseur se déplace toujours vers l'avant de la zone de texte.

Désolé de rendre la question confuse, mais c'est le mieux que je puisse faire :(((

Quelqu'un sait-il pourquoi cela se produit et quelle est la solution possible ?

Merci ! !!

PS

Je viens de l'ajouter à JSFiddle

http://jsfiddle.net/jakeaustin5574/AU9CA/3/

Answer 1

Vous êtes presque arrivé changez votre code pour être :

$(document).on("focus", "#text_input", function() {

    value = $("#text_input").val();
    $("#text_input").val("");
    setTimeout(function(){
       $("#text_input").val(value);
    }, 0);

});

Si cela ne résout pas le problème, j'aimerais le voir sur jsfiddle.