Obtenir la position du curseur en utilisant jCaret Plugin dans IE

Question

J'ai un problème avec le plugin jCaret dans IE.

jCaret downloads

Je veux obtenir la position de caret dans une zone de texte.

Mon code ressemble à ceci:

$('.myTextArea').click(function(){ 
    var myCaretPos = $(this).caret().end; 
}); 

Le problème dans IE est que je ne reçois que résultat correct si la zone de texte est une seule ligne, mais s'il y a plus d'une ligne le résultat est erroné. Il semble que les sauts de ligne prennent un caractère supplémentaire dans IE. Alors, comment puis-je supprimer les sauts de ligne dans IE?

Answer 1

J'ai rencontré et résolu ce problème. Voici une fonction qui va le faire en dehors jQuery:

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

Et un exemple de comment l'utiliser:

$('.myTextArea').click(function(){ 
    var myCaretPos = getInputSelection(this).end; 
}); 

J'ai aussi fait un plug-in jQuery qui inclut cette fonctionnalité, ainsi que autre fonctionnalité relative aux sélections de textarea. Il n'est pas encore sorti mais est stable et testé. La source est ici: http://code.google.com/p/rangy/source/browse/trunk/src/js/modules/textinputs_jquery.js. Exemple:

$('.myTextArea').click(function(){ 
    var myCaretPos = $(this).getSelection().end; 
});