ContentEditable DIV中的不可编辑跨度的选择和删除问题

Question

I have a DIV with ContentEditable set to TRUE. Inside it there are several spans with ContentEditable set to FALSE.

I trap the BackSpace key so that if the element under cursor is <span> I can delete it.

The problem is that it works alternately with odd spans only.

So, for example, with the html code below, put the cursor at the end of text in DIV, and press backspace all the way till the beginning of div. Observe that it will select/delete first span, then leave the second, then select/delete the third span, then leave the fourth and so on.

This behavior is only on Internet Explorer. It works exactly as expected on Firefox.

How should I make the behavior consistant in Internet Explorer?

Following html code can be used to reproduce the behavior:

 var EditableDiv = document.getElementById('EditableDiv'); EditableDiv.onkeydown = function(event) { var ignoreKey; var key = event.keyCode || event.charCode; if (!window.getSelection) return; var selection = window.getSelection(); var focusNode = selection.focusNode, anchorNode = selection.anchorNode; if (key == 8) { //backspace if (!selection.isCollapsed) { if (focusNode.nodeName == 'SPAN' || anchorNode.nodeName == 'SPAN') { anchorNode.parentNode.removeChild(anchorNode); ignoreKey = true; } } else if (anchorNode.previousSibling && anchorNode.previousSibling.nodeName == 'SPAN' && selection.anchorOffset <= 1) { SelectText(event, anchorNode.previousSibling); ignoreKey = true; } } if (ignoreKey) { var evt = event || window.event; if (evt.stopPropagation) evt.stopPropagation(); evt.preventDefault(); return false; } } function SelectText(event, element) { var range, selection; EditableDiv.focus(); if (document.body.createTextRange && element.nodeName == 'SPAN') { range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); } var evt = (event) ? event : window.event; if (evt.stopPropagation) evt.stopPropagation(); if (evt.cancelBubble != null) evt.cancelBubble = true; return false; } 

 #EditableDiv { height: 75px; width: 500px; font-family: Consolas; font-size: 10pt; font-weight: normal; letter-spacing: 1px; background-color: white; overflow-y: scroll; overflow-x: hidden; border: 1px solid black; padding: 5px; } #EditableDiv span { color: brown; font-family: Verdana; font-size: 8.5pt; min-width: 10px; _width: 10px; } #EditableDiv p, #EditableDiv br { display: inline; } 

 <div id="EditableDiv" contenteditable="true"> &nbsp;(<span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>Field1</span> < 500) <span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>OR</span> (<span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>Field2</span> > 100 <span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>AND</span> (<span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>Field3</span> <=200) ) </div> 

EDIT

Just FYI. I have asked this question in MSDN Forum as well.

Answer 1

The challenge to this is to get IE11 to backspace from the right directly against the <span>. Then the next backspace will select and highlight it. This seems like such a simple objective, but IE11 just won't cooperate. There should be a quick easy patch, right? And so the bugs begin.

The approach I came up with is to walk the tree backwards to the first previous non-empty node, clearing the empty nodes between to appease IE, and then evaluate a few conditions. If the caret should end up at the right side of the <span>, then do it manually (because IE won't) by creating a new range obj with the selection there at the end of the <span>.

online demo


I added an additional kludge for IE in the case that two spans are dragged against eachother. For example, Field2Field3. When you then backspace from the right onto Field3, then backspace once again to delete it, IE would jump the caret leftward over Field2. Skip right over Field2. grrr. The workaround is to intercept that and insert a space between the pair of spans. I wasn't confident you'd be happy with that. But, you know, it's a workaround. Anyway, that turned-up yet another bug, where IE changes the inserted space into two empty textnodes. more grrr. And so a workaround for the workaround. See the non-isCollapsed code.

CODE SNIPPET

 var EditableDiv = document.getElementById('EditableDiv'); EditableDiv.onkeydown = function(event) { var ignoreKey; var key = event.keyCode || event.charCode; if (!window.getSelection) return; var selection = window.getSelection(); var focusNode = selection.focusNode, anchorNode = selection.anchorNode; var anchorOffset = selection.anchorOffset; if (!anchorNode) return if (anchorNode.nodeName.toLowerCase() != '#text') { if (anchorOffset < anchorNode.childNodes.length) anchorNode = anchorNode.childNodes[anchorOffset] else { while (!anchorNode.nextSibling) anchorNode = anchorNode.parentNode // this might step out of EditableDiv to "justincase" comment node anchorNode = anchorNode.nextSibling } anchorOffset = 0 } function backseek() { while ((anchorOffset == 0) && (anchorNode != EditableDiv)) { if (anchorNode.previousSibling) { if (anchorNode.previousSibling.nodeName.toLowerCase() == '#text') { if (anchorNode.previousSibling.nodeValue.length == 0) anchorNode.parentNode.removeChild(anchorNode.previousSibling) else { anchorNode = anchorNode.previousSibling anchorOffset = anchorNode.nodeValue.length } } else if ((anchorNode.previousSibling.offsetWidth == 0) && (anchorNode.previousSibling.offsetHeight == 0)) anchorNode.parentNode.removeChild(anchorNode.previousSibling) else { anchorNode = anchorNode.previousSibling while ((anchorNode.lastChild) && (anchorNode.nodeName.toUpperCase() != 'SPAN')) { if ((anchorNode.lastChild.offsetWidth == 0) && (anchorNode.lastChild.offsetHeight == 0)) anchorNode.removeChild(anchorNode.lastChild) else if (anchorNode.lastChild.nodeName.toLowerCase() != '#text') anchorNode = anchorNode.lastChild else if (anchorNode.lastChild.nodeValue.length == 0) anchorNode.removeChild(anchorNode.lastChild) else { anchorNode = anchorNode.lastChild anchorOffset = anchorNode.nodeValue.length //break //don't need to break, textnode has no children } } break } } else while (((anchorNode = anchorNode.parentNode) != EditableDiv) && !anchorNode.previousSibling) {} } } if (key == 8) { //backspace if (!selection.isCollapsed) { try { document.createElement("select").size = -1 } catch (e) { //kludge for IE when 2+ SPANs are back-to-back adjacent if (anchorNode.nodeName.toUpperCase() == 'SPAN') { backseek() if (anchorNode.nodeName.toUpperCase() == 'SPAN') { var k = document.createTextNode(" ") // doesn't work here between two spans. IE makes TWO EMPTY textnodes instead ! anchorNode.parentNode.insertBefore(k, anchorNode) // this works anchorNode.parentNode.insertBefore(anchorNode, k) // simulate "insertAfter" } } } } else { backseek() if (anchorNode == EditableDiv) ignoreKey = true else if (anchorNode.nodeName.toUpperCase() == 'SPAN') { SelectText(event, anchorNode) ignoreKey = true } else if ((anchorNode.nodeName.toLowerCase() == '#text') && (anchorOffset <= 1)) { var prev, anchorNodeSave = anchorNode, anchorOffsetSave = anchorOffset anchorOffset = 0 backseek() if (anchorNode.nodeName.toUpperCase() == 'SPAN') prev = anchorNode anchorNode = anchorNodeSave anchorOffset = anchorOffsetSave if (prev) { if (anchorOffset == 0) SelectEvent(prev) else { var r = document.createRange() selection.removeAllRanges() if (anchorNode.nodeValue.length > 1) { r.setStart(anchorNode, 0) selection.addRange(r) anchorNode.deleteData(0, 1) } else { for (var i = 0, p = prev.parentNode; true; i++) if (p.childNodes[i] == prev) break r.setStart(p, ++i) selection.addRange(r) anchorNode.parentNode.removeChild(anchorNode) } } ignoreKey = true } } } } if (ignoreKey) { var evt = event || window.event; if (evt.stopPropagation) evt.stopPropagation(); evt.preventDefault(); return false; } } function SelectText(event, element) { var range, selection; EditableDiv.focus(); if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNode(element) selection.removeAllRanges(); selection.addRange(range); } else { range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } var evt = (event) ? event : window.event; if (evt.stopPropagation) evt.stopPropagation(); if (evt.cancelBubble != null) evt.cancelBubble = true; return false; } 

 #EditableDiv { height: 75px; width: 500px; font-family: Consolas; font-size: 10pt; font-weight: normal; letter-spacing: 1px; background-color: white; overflow-y: scroll; overflow-x: hidden; border: 1px solid black; padding: 5px; } #EditableDiv span { color: brown; font-family: Verdana; font-size: 8.5pt; min-width: 10px; /*_width: 10px;*/ /* what is this? */ } #EditableDiv p, #EditableDiv br { display: inline; } 

 <div id="EditableDiv" contenteditable="true"> &nbsp;(<span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>Field1</span> < 500) <span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>OR</span> (<span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>Field2</span> > 100 <span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>AND</span> (<span contenteditable='false' onclick='SelectText(event, this);' unselectable='on'>Field3</span> <= 200) ) </div>