Comment obtenir la position de la colonne caret (pas des pixels) dans une zone de texte, en caractères, dès le début?

Comment obtenir la position du curseur dans un <textarea>JavaScript?

Par exemple: This is| a text

Cela devrait revenir 7.

Comment le feriez-vous pour renvoyer les chaînes entourant le curseur / la sélection?

Par exemple: 'This is', '', ' a text'.

Si le mot «est» est mis en surbrillance, il revient 'This ', 'is', ' a text'.

Avec Firefox, Safari (et d'autres navigateurs basés sur Gecko), vous pouvez facilement utiliser textarea.selectionStart, mais pour IE cela ne fonctionne pas, vous devrez donc faire quelque chose comme ceci:

function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}

( code complet ici )

Je vous recommande également de vérifier le plugin jQuery FieldSelection , il vous permet de faire cela et bien plus encore ...

Edit: J'ai en fait réimplémenté le code ci-dessus:

function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

Consultez un exemple ici .

Mis à jour le 5 septembre 2010

Voyant que tout le monde semble être dirigé ici pour ce problème, j'ajoute ma réponse à une question similaire, qui contient le même code que cette réponse mais avec un historique complet pour ceux qui sont intéressés:

Document.selection.createRange d'IE n'inclut pas les lignes vierges de début ou de fin

Tenir compte des sauts de ligne de fin est délicat dans IE, et je n'ai vu aucune solution qui le fasse correctement, y compris d'autres réponses à cette question. Il est cependant possible d'utiliser la fonction suivante, qui vous renverra le début et la fin de la sélection (qui sont les mêmes dans le cas d'un signe d'insertion) dans un <textarea>texte ou <input>.

Notez que la zone de texte doit avoir le focus pour que cette fonction fonctionne correctement dans IE. En cas de doute, appelez d' focus()abord la méthode textarea .

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

J'ai modifié la fonction ci-dessus pour tenir compte des retours chariot dans IE. Il n'a pas été testé mais j'ai fait quelque chose de similaire dans mon code, donc cela devrait être réalisable.

function getCaret(el) {
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
    rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    var add_newlines = 0;
    for (var i=0; i<rc.text.length; i++) {
      if (rc.text.substr(i, 2) == '\r\n') {
        add_newlines += 2;
        i++;
      }
    }

    //return rc.text.length + add_newlines;

    //We need to substract the no. of lines
    return rc.text.length - add_newlines; 
  }  
  return 0; 
}

Si vous ne devez pas prendre en charge IE, vous pouvez utiliser selectionStartet les selectionEndattributs de textarea.

Pour obtenir la position du curseur, utilisez simplement selectionStart:

function getCaretPosition(textarea) {
  return textarea.selectionStart
}

Pour obtenir les chaînes entourant la sélection, utilisez le code suivant:

function getSurroundingSelection(textarea) {
  return [textarea.value.substring(0, textarea.selectionStart)
         ,textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
         ,textarea.value.substring(textarea.selectionEnd, textarea.value.length)]
}

Démo sur JSFiddle .

Voir aussi la documentation HTMLTextAreaElement .