根據可編輯的Div中的插入符位置獲取所選元素

Question

我試圖在可編輯的DIV中的任何給定時間獲取插入符號的元素。

到目前為止，我能夠在文本中獲得插入符號的位置。

但是我想更進一步以實際選擇元素。 例如，如果在我的示例中插入號位於單詞"wombat"中的第一個字母之后，則解決方案還將返回所選元素"wombatid"的id ，而不僅僅是返回插入號位置。 任何提示或解決方案？

 function getSelectionCharacterOffsetWithin(element) { var start = 0; var end = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { sel = win.getSelection(); if (sel.rangeCount > 0) { var range = win.getSelection().getRangeAt(0); var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.startContainer, range.startOffset); start = preCaretRange.toString().length; preCaretRange.setEnd(range.endContainer, range.endOffset); end = preCaretRange.toString().length; } } else if ( (sel = doc.selection) && sel.type != "Control") { var textRange = sel.createRange(); var preCaretTextRange = doc.body.createTextRange(); preCaretTextRange.moveToElementText(element); preCaretTextRange.setEndPoint("EndToStart", textRange); start = preCaretTextRange.text.length; preCaretTextRange.setEndPoint("EndToEnd", textRange); end = preCaretTextRange.text.length; } return { start: start, end: end }; } function reportSelection() { var selOffsets = getSelectionCharacterOffsetWithin( document.getElementById("editor") ); document.getElementById("selectionLog").innerHTML = "Selection offsets: " + selOffsets.start + ", " + selOffsets.end+" <br> Selected Element's id: 'element here'"; } window.onload = function() { document.addEventListener("selectionchange", reportSelection, false); document.addEventListener("mouseup", reportSelection, false); document.addEventListener("mousedown", reportSelection, false); document.addEventListener("keyup", reportSelection, false); }; 

 #editor { padding: 5px; border: solid green 1px; } 

 Select something in the content below: <div id="editor" contenteditable="true">A <i id="wombatid">wombat</i> is a marsupial native to <b id="australiaid">Australia</b></div> <div id="selectionLog"></div> 

Answer 1

要獲取ID，您可以嘗試以下操作：

document.querySelectorAll("#editor *").forEach(el => el.onclick = e => alert(e.target.id));

這里e.target將是您的HTML元素，它適用於任何HTML元素

 function getSelectionCharacterOffsetWithin(element) { var start = 0; var end = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { sel = win.getSelection(); if (sel.rangeCount > 0) { var range = win.getSelection().getRangeAt(0); var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.startContainer, range.startOffset); start = preCaretRange.toString().length; preCaretRange.setEnd(range.endContainer, range.endOffset); end = preCaretRange.toString().length; } } else if ( (sel = doc.selection) && sel.type != "Control") { var textRange = sel.createRange(); var preCaretTextRange = doc.body.createTextRange(); preCaretTextRange.moveToElementText(element); preCaretTextRange.setEndPoint("EndToStart", textRange); start = preCaretTextRange.text.length; preCaretTextRange.setEndPoint("EndToEnd", textRange); end = preCaretTextRange.text.length; } return { start: start, end: end }; } function reportSelection() { var selOffsets = getSelectionCharacterOffsetWithin( document.getElementById("editor") ); document.getElementById("selectionLog").innerHTML = "Selection offsets: " + selOffsets.start + ", " + selOffsets.end+" <br> Selected Element's id: 'element here'"; } window.onload = function() { document.addEventListener("selectionchange", reportSelection, false); document.addEventListener("mouseup", reportSelection, false); document.addEventListener("mousedown", reportSelection, false); document.addEventListener("keyup", reportSelection, false); document.querySelectorAll("#editor *").forEach(el => el.onclick = e => alert(e.target.id)); }; 

 #editor { padding: 5px; border: solid green 1px; } 

 Select something in the content below: <div id="editor" contenteditable="true">A <i id="wombatid">wombat</i> is a marsupial native to <b id="australiaid">Australia</b></div> <div id="selectionLog"></div>