將指針設置爲contenteditable

Question

如何使用JavaScript將指針設置爲contenteditable div？ 類似這樣的：$('[contenteditable="true"]').setCursor(10);

Answer 1

下面是可以幫助你的代碼片段。你可以找到工作示例here http://jsfiddle.net/naveen_champ/wps4cn01/

更新：代碼更新後Tim添加評論[2014年10月2日]，以匹配支持內容可編輯元素。

!function($){ 
    function findHiddenCharacters(node, beforeCaretIndex) { 
     var hiddenCharacters = 0 
     var lastCharWasWhiteSpace=true 
     for(var n=0; n-hiddenCharacters<beforeCaretIndex &&n<node.length; n++) { 
      if([' ','\n','\t','\r'].indexOf(node.textContent[n]) !== -1) { 
       if(lastCharWasWhiteSpace) 
        hiddenCharacters++ 
       else 
        lastCharWasWhiteSpace = true 
      } else { 
       lastCharWasWhiteSpace = false 
      } 
     } 

     return hiddenCharacters 
    } 
    var setSelectionByCharacterOffsets = null; 

    if (window.getSelection && document.createRange) { 
     setSelectionByCharacterOffsets = function(containerEl, start, end) { 
      var charIndex = 0, range = document.createRange(); 
      range.setStart(containerEl, 0); 
      range.collapse(true); 
      var nodeStack = [containerEl], node, foundStart = false, stop = false; 

      while (!stop && (node = nodeStack.pop())) { 
       if (node.nodeType == 3) { 
        var hiddenCharacters = findHiddenCharacters(node, node.length) 
        var nextCharIndex = charIndex + node.length - hiddenCharacters; 

        if (!foundStart && start >= charIndex && start <= nextCharIndex) { 
         var nodeIndex = start-charIndex 
         var hiddenCharactersBeforeStart = findHiddenCharacters(node, nodeIndex) 
         range.setStart(node, nodeIndex + hiddenCharactersBeforeStart); 
         foundStart = true; 
        } 
        if (foundStart && end >= charIndex && end <= nextCharIndex) { 
         var nodeIndex = end-charIndex 
         var hiddenCharactersBeforeEnd = findHiddenCharacters(node, nodeIndex) 
         range.setEnd(node, nodeIndex + hiddenCharactersBeforeEnd); 
         stop = true; 
        } 
        charIndex = nextCharIndex; 
       } else { 
        var i = node.childNodes.length; 
        while (i--) { 
         nodeStack.push(node.childNodes[i]); 
        } 
       } 
      } 

      var sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (document.selection) { 
     setSelectionByCharacterOffsets = function(containerEl, start, end) { 
      var textRange = document.body.createTextRange(); 
      textRange.moveToElementText(containerEl); 
      textRange.collapse(true); 
      textRange.moveEnd("character", end); 
      textRange.moveStart("character", start); 
      textRange.select(); 
     }; 
    } 


    $.fn.setCaretPosition = function(caretPos) { 
     return this.each(function(){ 
      var elem = this; 
      setSelectionByCharacterOffsets(elem, caretPos, caretPos); 
     }); 
    } 
}(window.jQuery);