Position du signe insertion dans la zone de texte, en caractères du début

Question

Comment obtenez-vous la position du signe insertion dans la zone de texte à l’aide de JavaScript ?

Par exemple :
``

Cela doit retourner 7.

Comment souhaitez-vous faire à retourner les chaînes qui entourent le curseur/sélection ? par exemple :

Si le mot « est » est mis en surbrillance, puis il retournerait

Answer 1

Avec Firefox, Safari (et les autres navigateurs basés sur Gecko), vous pouvez facilement utiliser textarea.selectionStart, mais pour IE qui ne fonctionne pas, alors vous aurez à 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)

Moi aussi je vous recommande de vérifier le jQuery FieldSelection Plugin, il vous permet de le faire et bien plus encore...

Edit: en fait je re-mise en œuvre 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; 
}

Vérifier un exemple ici.

Answer 2

Mis À Jour Le 5 Septembre 2010

Voyant que tout le monde semble l'avoir dirigé ici pour ce problème, je vais ajouter ma réponse à une question similaire, qui contient le même code que cette réponse, mais avec un arrière-plan pour ceux qui sont intéressés:

IE document.sélection.createRange ne comprend pas de leader ou suiveur de lignes vides

De compte pour la fuite des sauts de ligne est délicate dans IE, et je n'ai pas vu de solution qui fait cela correctement, y compris toutes les autres réponses à cette question. Il est cependant possible, à l'aide de la fonction suivante, qui va vous retourner le début et la fin de la sélection (qui sont les mêmes dans le cas d'un accent circonflexe) au sein d'un <textarea> ou texte <input>.

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

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
    };
}

Answer 3

J’ai modifié la fonction ci-dessus pour tenir compte des retours de chariot dans Internet Explorer. Il a non testé, mais j’ai fait quelque chose de similaire avec elle dans mon code, il devrait être réalisable.