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 code can be used to reproduce the behavior.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Editor</title><style type="text/css">
#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;
}</style></head><body><form id="form1" ><div id="EditableDiv" contenteditable="true"> (<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><script type="text/javascript" language="javascript">
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;
}</script></form></body></html>Pradeep, Microsoft MVP (Visual Basic)
http://pradeep1210.wordpress.com