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

Comment obtenez-vous la position du curseur dans une ou un texte .

Notez que la zone de texte doit avoir le focus pour que cette fonction fonctionne correctement dans Internet Explorer. En cas de doute, appelez d’abord la méthode focus() de 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. Ce n’est pas testé, mais j’ai fait quelque chose de similaire dans mon code, donc ça 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 

Si vous n’avez pas à supporter IE, vous pouvez utiliser les atsortingbuts selectionStart et selectionEnd 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.subssortingng(0, textarea.selectionStart) ,textarea.value.subssortingng(textarea.selectionStart, textarea.selectionEnd) ,textarea.value.subssortingng(textarea.selectionEnd, textarea.value.length)] } 

Démo sur JSFiddle .

Voir aussi les documents HTMLTextAreaElement .