HTML5怎么在div里面改属性,javascript – 如何使用属性contentEditable删除div中的HTML元素？...

事实证明这比我想象的要复杂得多.或者我让它变得比它需要的更复杂.无论如何,这应该适用于所有大型浏览器：

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;

}

};