如何知道哪些元素在contentEditable情況下正在修改？

Question

我有一個小問題/問題。我在一個小WYSIWYG編輯器上工作。我使用帶選項contentEditable =「true」的div，我想知道什麼時候點擊某個按鈕，我的div中的哪個元素正在被用戶修改。

例如，如果div上有3個段落，並且該用戶修改了第二個，我想知道他何時點擊他當前要修改第二段以顯示文本內容的按鈕！在這個例子中「P2」：

<div contenteditable="true"><p>P1</p><p>P2</p><p>P3</p></div> 

在此先感謝您的幫助。

薩科

Answer 1

你可以檢查在mousedown事件的按鈕的選擇。以下內容適用於所有主流瀏覽器：

function getSelectionBoundaryContainerElement(start) { 
    var container = null; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var range = sel.getRangeAt(0); 
      range.collapse(start); 
      container = range.startContainer; 
      if (container.nodeType != 1) { 
       container = container.parentNode; 
      } 
     } 
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
     var textRange = document.selection.createRange(); 
     textRange.collapse(start); 
     container = textRange.parentElement(); 
    } 
    return container; 
} 

document.getElementById("yourButtonId").onmousedown = function() { 
    alert(getSelectionBoundaryContainerElement().innerHTML); 
}