Position du curseur dans une zone de texte (index de caractères, pas les coordonnées x / y)

Comment puis-je obtenir la position du caret dans une zone de texte en utilisant jQuery? Je cherche le décalage du curseur depuis le début du texte, pas pour la position (x, y) .

Pas jQuery, mais juste Javascript …

var position = window.getSelection().getRangeAt(0).startOffset; 

Modification de la solution de BojanG pour fonctionner avec jQuery. Testé dans Chrome, FF et IE.

 (function ($, undefined) { $.fn.getCursorPosition = function() { var el = $(this).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; } return pos; } })(jQuery); 

Fondamentalement, pour l’utiliser sur une zone de texte, procédez comme suit:

 $("#myTextBoxSelector").getCursorPosition(); 
 function caretPos(el) { var pos = 0; // IE Support if (document.selection) { 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; } // Firefox support else if (el.selectionStart || el.selectionStart == '0') pos = el.selectionStart; return pos; } 

J’ai travaillé avec cette prise d’entrée masquée jQuery et j’ai trouvé la fonction caret très utile. J’ai extrait ce code du plugin ci-dessus.

 $.fn.caret = function (begin, end) { if (this.length == 0) return; if (typeof begin == 'number') { end = (typeof end == 'number') ? end : begin; return this.each(function () { if (this.setSelectionRange) { this.setSelectionRange(begin, end); } else if (this.createTextRange) { var range = this.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', begin); try { range.select(); } catch (ex) { } } }); } else { if (this[0].setSelectionRange) { begin = this[0].selectionStart; end = this[0].selectionEnd; } else if (document.selection && document.selection.createRange) { var range = document.selection.createRange(); begin = 0 - range.duplicate().moveStart('character', -100000); end = begin + range.text.length; } return { begin: begin, end: end }; } } 

Une fois la fonction créée, vous pouvez effectuer les opérations suivantes. Encore une fois, cette fonction a été extraite de la fonction de saisie masquée jQuery mentionnée ci-dessus.

 $("#id").caret(); //get the begin/end caret position $("#id").caret().begin; $("#id").caret().end; $("#otherId").caret(5); //set the caret position by index $("#otherId").caret(1, 5); //select a range 

Cela fonctionne également dans IE9, Firefox et Chrome:

 (function ($, undefined) { $.fn.getCursorPosition = function() { var el = $(this).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; } return pos; } })(jQuery); 

Et je pense que c’est beaucoup plus propre que la version de Ryan

 function doGetCaretPosition(ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); }