web-dev-qa-db-fra.com

Comment obtenez-vous la position du curseur dans une zone de texte?

J'ai une textarea et j'aimerais savoir si je suis sur la dernière ligne de la textarea ou sur la première ligne de la textarea avec le curseur JavaScript.

J'ai pensé à saisir la position du premier caractère de nouvelle ligne et du dernier caractère de nouvelle ligne, puis à saisir la position du curseur.

var firstNewline = $('#myTextarea').val().indexOf('\n');
var lastNewline = $('#myTextarea').val().lastIndexOf('\n');

var cursorPosition = ?????;

if (cursorPosition < firstNewline)
    // I am on first line.
else if (cursorPosition > lastNewline)
    // I am on last line.
  • Est-il possible de saisir la position du curseur dans la zone de texte?
  • Avez-vous une meilleure suggestion pour savoir si je suis sur la première ou la dernière ligne d'une zone de texte?

les solutions jQuery sont préférées à moins que JavaScript soit aussi simple ou plus simple.

javascriptjqueryhtmlinputtextarea
56
Chev

S'il n'y a pas de sélection, vous pouvez utiliser les propriétés .selectionStart ou .selectionEnd (sans sélection, elles sont égales).

var cursorPosition = $('#myTextarea').prop("selectionStart");

Notez que cela n'est pas pris en charge par les anciens navigateurs, notamment IE8-. Là, vous devrez travailler avec des plages de texte, mais c'est une frustration totale.

Je pense qu’il existe une bibliothèque quelque part qui est dédiée à l’obtention et à la définition de positions de sélection/curseur dans les éléments d’entrée. Je ne me souviens plus de son nom, mais il semble y avoir des dizaines d'articles sur ce sujet.

68
pimvdb

J'ai effectué pas mal de travail à ce sujet et posté une fonction pour obtenir plusieurs fois un curseur/une position de sélection dans textareas sur Stack Overflow. Contrairement à la plupart des autres codes utilisés pour ce faire, il fonctionne correctement avec les sauts de ligne dans IE <9.

Voici un exemple de question avec un peu de fond:

Existe-t-il un substitut approuvé par Internet Explorer pour selectionStart et selectionEnd?

Et voici un lien vers un plug-in jQuery que j'ai écrit qui inclut cette fonction et d'autres fonctions de zone de texte liées à la sélection:

https://github.com/timdown/rangyinputs

20
Tim Down

Voici une fonction de navigateur croisé que j'ai dans ma bibliothèque standard:

function getCursorPos(input) {
    if ("selectionStart" in input && document.activeElement == input) {
        return {
            start: input.selectionStart,
            end: input.selectionEnd
        };
    }
    else if (input.createTextRange) {
        var sel = document.selection.createRange();
        if (sel.parentElement() === input) {
            var rng = input.createTextRange();
            rng.moveToBookmark(sel.getBookmark());
            for (var len = 0;
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                len++;
            }
            rng.setEndPoint("StartToStart", input.createTextRange());
            for (var pos = { start: 0, end: len };
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                pos.start++;
                pos.end++;
            }
            return pos;
        }
    }
    return -1;
}

Utilisez-le dans votre code comme ceci:

var cursorPosition = getCursorPos($('#myTextarea')[0])

Voici sa fonction complémentaire:

function setCursorPos(input, start, end) {
    if (arguments.length < 3) end = start;
    if ("selectionStart" in input) {
        setTimeout(function() {
            input.selectionStart = start;
            input.selectionEnd = end;
        }, 1);
    }
    else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.moveStart("character", start);
        rng.collapse();
        rng.moveEnd("character", end - start);
        rng.select();
    }
}

http://jsfiddle.net/gilly3/6Sun8/

17
gilly3

Voici le code pour obtenir le numéro de ligne et la position de la colonne

function getLineNumber(tArea) {

    return tArea.value.substr(0, tArea.selectionStart).split("\n").length;
}

function getCursorPos() {
    var me = $("textarea[name='documenttext']")[0];
    var el = $(me).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    var ret = pos - prevLine(me);
    alert(ret);

    return ret; 
}

function prevLine(me) {
    var lineArr = me.value.substr(0, me.selectionStart).split("\n");

    var numChars = 0;

    for (var i = 0; i < lineArr.length-1; i++) {
        numChars += lineArr[i].length+1;
    }

    return numChars;
}

tArea est l'élément DOM de la zone de texte

0
Clay Smith