web-dev-qa-db-fra.com

Définissez le focus et le curseur sur la fin du champ de saisie de texte / chaîne avec. Jquery

J'ai la fonction suivante qui ajoute un sélecteur à une entrée de recherche en tant qu'option avancée, tout comme la recherche avancée de pile déborde.

Lorsque vous cliquez sur ce que vous recherchez, un préfixe est ajouté. Voir Jquery ci-dessous:

<script>
$(document).ready(function () {

        $("table#advanced_search_options tr").click(function () {
            var SearchSelection = $(this).children("td:last-of-type").html();
            var SearchInput = $('#Search');
            SearchInput.val(SearchInput.val() + SearchSelection);
            return false;
            alert(SearchSelection);
        });
});
</script>

Comment puis-je manipuler ce qui précède pour mettre également le focus sur l'entrée #search, en plaçant la carotte (le curseur d'insertion de texte clignotant) à la fin du texte/de la valeur inséré? par exemple.

HC: <- La valeur ajoutée à ma recherche, je voudrais placer le curseur ici, juste après le:

javascriptjqueryhtmlcss
30
Mark

Vous pouvez le faire en utilisant Input.setSelectionRange , composant de l’API Range permettant d’interagir avec les sélections de texte et le curseur de texte:

var searchInput = $('#Search');

// Multiply by 2 to ensure the cursor always ends up at the end;
// Opera sometimes sees a carriage return as 2 characters.
var strLength = searchInput.val().length * 2;

searchInput.focus();
searchInput[0].setSelectionRange(strLength, strLength);

Démo: Violon

121
palaѕн