內容編輯DIV點擊/插入符設置

<div id="profileBody" class="customInputDiv" contentEditable='true' autocomplete="off"></div>

Basicly我想以檢測abouts光標在特定事件（優選代碼的作品的onclick，KEYDOWN或上按鈕）。

類似這樣的： onkeydown - 在div中保存脫字符位置，然後設置脫字符位置。

這聽起來有點愚蠢，但這是必需的，因爲在某些事件中，我會稍微改變內容，並且在做光標位置更改時非常煩人。

我討厭做沒有我試過的例子的問題，但如果你閱讀以前的問題，我總是提供我已經嘗試過的非常詳細的東西，只是在這裏死去！

function setCaret() { 
    var el = document.getElementById("editable"); 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(el.childNodes[2], 5); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    el.focus(); 
}

也許從window.getSelection();解析數據的好方法？

找到了：http://jsfiddle.net/s5xAr/3/但我不想 - 只是希望它得到插入位置使用的功能，並設置它，例如，

getCaretPOS(); 
//do something 
setCaretPOS();

此代碼將設置它，但得到它似乎是這個問題.. 感謝

來源

2012-09-03 LmC

來獲取插入符位置，使用此功能：

function getCaretPosition(editableDiv) { 
    var caretPos = 0, containerEl = null, sel, range; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      if (range.commonAncestorContainer.parentNode == editableDiv) { 
       caretPos = range.endOffset; 
      } 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     if (range.parentElement() == editableDiv) { 
      var tempEl = document.createElement("span"); 
      editableDiv.insertBefore(tempEl, editableDiv.firstChild); 
      var tempRange = range.duplicate(); 
      tempRange.moveToElementText(tempEl); 
      tempRange.setEndPoint("EndToEnd", range); 
      caretPos = tempRange.text.length; 
     } 
    } 
    return caretPos; 
}

這應該工作的優良大多數瀏覽器（當然，離開IE）。你好像有覆蓋你的IE瀏覽器setCaret功能。

該功能是從another SO answer.看看評論。

Demo

來源

2012-09-03 10:23:11

的console.log（$（ '＃' +搜索Maincontent）[0] .selectionStart）;當這樣做返回undefined – LmC

@LiamMcCann哦，是的，沒有意識到這並不適用於'contenteditable's。我會看看我能否爲這些人找到一些東西。 –

@LiamMcCann編輯我的答案。這應該適合你。 –

內容編輯DIV點擊/插入符設置

回答

相關問題