Comment pouvez-vous déplacer le curseur à la dernière position d'une zone de texte en Javascript?

Question

J'ai une zone de texte et un bouton sur un formulaire. La zone de texte peut déjà contenir du texte. Je souhaite que le curseur se déplace à la dernière position dans la zone de texte lorsque le bouton est cliqué.

Est-ce possible?

Answer 1

Par "dernière position", voulez-vous dire la fin du texte?

La modification de la "valeur." d'un champ de formulaire déplacera le curseur jusqu'à la fin de chaque navigateur, à l'exception de IE. Avec IE, vous devez vous salir les mains et manipuler délibérément la sélection en utilisant des interfaces non standard:

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

Ou voulez-vous dire que le curseur revient à l'endroit où il se trouvait précédemment, à la dernière mise au point de la zone de texte?

Dans tous les navigateurs sauf IE, cela se produira déjà en appelant simplement "element.focus ()"; le navigateur se souvient de la dernière position du curseur / de la sélection par entrée et le rétablit.

Cela serait assez difficile à reproduire dans IE. Il vous faudrait scruter tout le temps pour vérifier où se trouvait le curseur / la sélection et vous rappeler cette position si elle se trouvait dans un élément d’entrée, puis rechercher la position d’un élément donné lorsque le bouton était enfoncé et la restaurer. Ceci implique une manipulation très fastidieuse de "document.selection.createRange ()".

Je ne suis au courant d'aucun élément de jQuery qui pourrait vous aider à faire cela, mais il y a peut-être un plugin quelque part?

Answer 2

La réponse de xgMz était la meilleure pour moi. Vous n'avez pas besoin de vous soucier du navigateur:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

Et voici une extension jQuery rapide que j'ai écrite pour le faire pour moi la prochaine fois:

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

Utilisez comme ceci:

$("#MyTextArea").focusToEnd();

Answer 3

Vous pouvez également faire ceci:

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

Ce code fonctionne à la fois pour input et textarea . Testé avec les derniers navigateurs: Firefox 23, IE 11 et Chrome 28.

jsFiddle disponible ici: http://jsfiddle.net/cG9gN/1 /

Source: https://stackoverflow.com/a/12654402/114029

Answer 4

Vous pouvez utiliser cette https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Answer 5

C’est ce que j’utilise pour les textareas à l’intérieur de mon événement onclick ou d’autres événements et semble fonctionner correctement pour FireFox et IE 7 & amp; 8. Il positionne le curseur à la fin du texte au lieu du début.

this.value = "some text I want to pre-populate";
this.blur();
this.focus();

Answer 6

Pour définir le focus de la souris et déplacer le curseur à la fin de la saisie. Son travail dans tous les navigateurs, sa logique est simple ici.

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);

Answer 7

J'ai légèrement modifié l'extension @mkaj pour prendre en charge la valeur par défaut

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");