web-dev-qa-db-fra.com

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

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

Est-ce possible?

javascriptjquerypositiontextareamouse-cursor
31
sol

Par «la 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 dans tous les navigateurs sauf 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 remettre le curseur à l'endroit où il se trouvait auparavant, la dernière fois que la zone de texte a été mise au point?

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

Ce 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 s’il 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?

25
bobince

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 rapide extension jQuery 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();
34
mkaj

Vous pouvez aussi 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 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

6
Leniel Maccaferri

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

$('input').caretToEnd();
4
spilliton

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

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

Pour activer la souris et déplacer le curseur à la fin de la saisie. Son travail dans chaque navigateur, sa logique est simple ici.

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

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...");
0
bn00d