如何使用屬性contentEditable刪除div內的HTML元素？

Question

有這個網站：

<div id="editable" contentEditable="true" > 
    <span contentEditable="false" >Text to delete</span> 
</div> 

需要的跨度（以及所有文本中）與單個退格鍵刪除，這可能嗎？

Answer 1

事實證明，這比我想象的要複雜得多。或者我已經做得比它需要更復雜。無論如何，這應該在所有的瀏覽器大工作：

function getLastTextNodeIn(node) { 
    while (node) { 
     if (node.nodeType == 3) { 
      return node; 
     } else { 
      node = node.lastChild; 
     } 
    } 
} 

function isRangeAfterNode(range, node) { 
    var nodeRange, lastTextNode; 
    if (range.compareBoundaryPoints) { 
     nodeRange = document.createRange(); 
     lastTextNode = getLastTextNodeIn(node); 
     nodeRange.selectNodeContents(lastTextNode); 
     nodeRange.collapse(false); 
     return range.compareBoundaryPoints(range.START_TO_END, nodeRange) > -1; 
    } else if (range.compareEndPoints) { 
     if (node.nodeType == 1) { 
      nodeRange = document.body.createTextRange(); 
      nodeRange.moveToElementText(node); 
      nodeRange.collapse(false); 
      return range.compareEndPoints("StartToEnd", nodeRange) > -1; 
     } else { 
      return false; 
     } 
    } 
} 

document.getElementById("editable").onkeydown = function(evt) { 
    var sel, range, node, nodeToDelete, nextNode, nodeRange; 
    evt = evt || window.event; 
    if (evt.keyCode == 8) { 
     // Get the DOM node containing the start of the selection 
     if (window.getSelection && window.getSelection().getRangeAt) { 
      range = window.getSelection().getRangeAt(0); 
     } else if (document.selection && document.selection.createRange) { 
      range = document.selection.createRange(); 
     } 

     if (range) { 
      node = this.lastChild; 
      while (node) { 
       if (isRangeAfterNode(range, node)) { 
        nodeToDelete = node; 
        break; 
       } else { 
        node = node.previousSibling; 
       } 
      } 

      if (nodeToDelete) { 
       this.removeChild(nodeToDelete); 
      } 
     } 
     return false; 
    } 
}; 

Answer 2

因爲要刪除整個元素，這是更好地使contenteditable="false"，使瀏覽器不會讓一元素的內容被刪除。

然後你就可以按如下方式使用該屬性在事件處理測試：在最新的Chrome版本

$('#editable').on('keydown', function (event) { 
    if (window.getSelection && event.which == 8) { // backspace 
     // fix backspace bug in FF 
     // https://bugzilla.mozilla.org/show_bug.cgi?id=685445 
     var selection = window.getSelection(); 
     if (!selection.isCollapsed || !selection.rangeCount) { 
      return; 
     } 

     var curRange = selection.getRangeAt(selection.rangeCount - 1); 
     if (curRange.commonAncestorContainer.nodeType == 3 && curRange.startOffset > 0) { 
      // we are in child selection. The characters of the text node is being deleted 
      return; 
     } 

     var range = document.createRange(); 
     if (selection.anchorNode != this) { 
      // selection is in character mode. expand it to the whole editable field 
      range.selectNodeContents(this); 
      range.setEndBefore(selection.anchorNode); 
     } else if (selection.anchorOffset > 0) { 
      range.setEnd(this, selection.anchorOffset); 
     } else { 
      // reached the beginning of editable field 
      return; 
     } 
     range.setStart(this, range.endOffset - 1); 


     var previousNode = range.cloneContents().lastChild; 
     if (previousNode && previousNode.contentEditable == 'false') { 
      // this is some rich content, e.g. smile. We should help the user to delete it 
      range.deleteContents(); 
      event.preventDefault(); 
     } 
    } 
}); 

demo on jsfiddle

Answer 3

似乎在默認情況下工作（沒有任何JavaScript）（我已經與測試61.0.3163.100）。