Get-position du curseur dans contenteditable div

Question

J'ai trouvé le code suivant ici sur le SO pour obtenir la position du curseur d'un contenteditable div, mais il retourne toujours 0.

La fonction qui devrait récupérer la position:

new function($) { 
    $.fn.getCursorPosition = function() { 
     var pos = 0; 
     var input = $(this).get(0); 
     // IE Support 
     if (document.selection) { 
      input.focus(); 
      var sel = document.selection.createRange(); 
      var selLen = document.selection.createRange().text.length; 
      sel.moveStart('character', -input.value.length); 
      pos = sel.text.length - selLen; 
     } 
     // Firefox support 
     else if (input.selectionStart || input.selectionStart == '0') 
      pos = input.selectionStart; 

     return pos; 
    } 
} (jQuery); 

Le code que j'utilise pour tester:

$('div.MESSAGE_OF_DAY').keyup(function() { 
    alert($(this).getCursorPosition()); // always returns 0??? 
}); 

J'utilise Chrome (8.0.552.215) si elle compte.

Answer 1

La fonction que vous avez trouvée est de trouver le curseur ou la sélection dans une entrée ou une zone de texte, pas un élément contentable. La position du caret/limite de sélection peut être obtenue en termes de nœud DOM et de décalage au sein de ce nœud en utilisant l'objet Selection du navigateur pour obtenir un Range. Je suggère de lire sur ces objets (les liens que j'ai fournis sont un bon point de départ). Dans Internet Explorer, ce processus est complètement différent mais vous pouvez utiliser ma bibliothèque Rangy pour éliminer les différences.