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

Question

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

Answer 1

Pas jQuery, mais juste Javascript ...

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

Answer 2

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; 

} 

Answer 3

solution modifiée de Bojang travailler 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(); 

Answer 4

Cela fonctionne aussi 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 qu'il est beaucoup plus propre alors la version de Ryan

Answer 5

J'ai fait un peu de travail en utilisant ce jQuery masked input plug et j'ai trouvé la fonction caret tion vraiment 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 que vous avez créé la fonction, vous pouvez effectuer les opérations suivantes. Encore une fois, cette fonction a été tirée de la fonction d'entrée 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 

Answer 6

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