【发布时间】：2015-10-02 04:50:20
【问题描述】：
我有一个 ContentEditable 设置为 TRUE 的 DIV。在其中有几个将 ContentEditable 设置为 FALSE 的 span。
我捕获 BackSpace 键，这样如果光标下的元素是 <span>，我可以删除它。
问题在于它只能与奇数跨度交替工作。
因此，例如，使用下面的 html 代码，将光标放在 DIV 中文本的末尾，然后一直按退格键直到 div 的开头。观察它会选择/删除第一个跨度，然后离开第二个跨度，然后选择/删除第三个跨度，然后离开第四个，依此类推。
此行为仅适用于 Internet Explorer。它在 Firefox 上完全符合预期。
我应该如何使 Internet Explorer 中的行为保持一致？
以下 html 代码可用于重现该行为：
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">
(<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>编辑
仅供参考。我也在MSDN Forum 中问过这个问题。
【问题讨论】：
-
@user4749485，非常感谢您的努力。尝试了演示。如果您从最后一个开始退格，但从中间的某个位置开始时从右侧删除字符，则效果很好。你能调查一下吗。我相信可以解决。 :)
-
你有没有提到stackoverflow.com/questions/14615551/… .. 请告诉我
-
@JafferWilson，是的，我已经搜索了很多关于这个影响你发布的链接的内容。它没有帮助。你有什么具体要我调查的吗？
-
@user4749485，我看不出你之前的演示和新的演示有什么区别！光标位置后的内容仍然被删除。例如将光标放在
100之前并开始退格。请注意，一旦Field2被删除，100也会被删除。 -
我试图深入研究这个问题，结果在这里：MSDN Forums Thread。这可能会有所帮助。
标签： html internet-explorer contenteditable