我捕获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问过这个问题.
解决方法 对此的挑战是将IE11从右侧直接退格到< span>.然后下一个退格将选择并突出显示它.这似乎是一个如此简单的目标,但IE11只是不会合作.应该有一个快速简单的补丁,对吧？因此,错误开始.我想出的方法是将树向后移动到第一个非空节点,清除之间的空节点以安抚IE,然后评估一些条件.如果插入符号应该在< span>的右侧,那么手动执行(因为IE不会),通过创建一个新的范围obj,并在< span> . online demoI的末尾添加选择在两个跨度相互拖动的情况下,IE的额外kludge.例如,FIEld2FIEld3.当你从右边退回到FIEld3上,然后再次退格以删除它时,IE会将插入符号向左跳过FIEld2.跳过FIEld2.哎呀.解决方法是拦截它并在这对跨距之间插入一个空格.我不相信你会对此感到高兴.但是,你知道,这是一种解决方法.无论如何,这又出现了另一个错误,IE将插入的空间更改为两个空文本节点.更多的.因此,解决方法的解决方法.请参阅非isCollapsed代码.代码链
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"> (<span contenteditable='false' onclick='SelectText(event,this);' unselectable='on'>FIEld1</span> < 500) <span contenteditable='false' onclick='SelectText(event,this);' unselectable='on'>FIEld3</span> <= 200) )</div>总结
以上是内存溢出为你收集整理的html – ContentEditable DIV中的不可编辑跨度的选择和删除问题全部内容，希望文章能够帮你解决html – ContentEditable DIV中的不可编辑跨度的选择和删除问题所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）