功能在Chrome中运行但在IE 11中无效 [英] function working in Chrome but not working in IE 11

问题描述

 $（' ＃editable'）。on（< span class =code-string>'  keydown'， function （event）{ 
  if （ window  .getSelection&& event.which ==  8 ）{ //  退格 
  //  修复FF中的退格错误 
  //   https://bugzilla.mozilla.org/show_bug.cgi?id=685445  
  var  selection =  window  .getSelection（）; 
  if （！selection.isCollapsed | |！selection.rangeCount）{
 返回; 
} 
 
  var  curRange = selection.getRangeAt（selection.rangeCount  -   1 < /跨度>）; 
  if （curRange.commonAncestorContainer.nodeType ==  3 && curRange.startOffset> ;  0 ）{
  //  我们是在孩子选择。正在删除文本节点的字符 
  return ; 
} 
 
  var  range =  document  .createRange（）; 
  if （selection.anchorNode！=  this ）{
  //  选择处于字符模式。将其扩展到整个可编辑字段 
 range.selectNodeContents（ this ）; 
 range.setEndBefore（selection.anchorNode）; 
} 其他 如果（selection.anchorOffset>  0 ）{
 range.setEnd（ this ，selection.anchorOffset）; 
} 其他 {
  //  到达可编辑字段的开头 
  return ; 
} 
 range.setStart（ this ，range.endOffset  -   1 ）; 
 
 
  var  previousNode = range.cloneContents（）。lastChild; 
  if （previousNode&& previousNode.contentEditable == '  false'）{
  //  这是一些丰富的内容，例如微笑。我们应该帮助用户删除它 
 range.deleteContents（）; 
 event.preventDefault（）; 
} 
} 
}）; 

HTML：

 <   div     id   =  editable    contenteditable   =  true >  foo <   span     contenteditable   =  false > 要删除的文字<   / span  >  bar <   / div  >  

解决方案

< blockquote>（' ＃editable'）。on（' keydown'， function （event）{
if （ window .getSelection&& event.which == 8 ）{ // 退格
// 修复FF中的退格错误
// https://bugzilla.mozilla.org/show_bug.cgi?id=685445
var selection = window .getSelection（）;
if （！selection.isCollapsed ||！selection.rangeCount）{
return ;
}

var curRange = selection.getRangeAt（selection.rangeCount - 1 < /跨度>）;
if （curRange.commonAncestorContainer.nodeType == 3 && curRange.startOffset> ; 0 ）{
// 我们是在孩子选择。正在删除文本节点的字符
return ;
}

var range = document .createRange（）;
if （selection.anchorNode！= this ）{
// 选择处于字符模式。将其扩展到整个可编辑字段
range.selectNodeContents（ this ）;
range.setEndBefore（selection.anchorNode）;
} 其他 如果（selection.anchorOffset> 0 ）{
range.setEnd（ this ，selection.anchorOffset）;
} 其他 {
// 到达可编辑字段的开头
return ;
}
range.setStart（ this ，range.endOffset - 1 ）;


var previousNode = range.cloneContents（）。lastChild;
if （previousNode&& previousNode.contentEditable == ' false'）{
// 这是一些丰富的内容，例如微笑。我们应该帮助用户删除它
range.deleteContents（）;
event.preventDefault（）;
}
}
}）;

HTML：

 <   div     id   =  editable    contenteditable   =  true >  foo <   span     contenteditable   =  false > 要删除的文字<   / span  >  bar <   / div  >  

$('#editable').on('keydown', function (event) {
    if (window.getSelection && event.which == 8) { // backspace
        // fix backspace bug in FF
        // https://bugzilla.mozilla.org/show_bug.cgi?id=685445
        var selection = window.getSelection();
        if (!selection.isCollapsed || !selection.rangeCount) {
            return;
        }

        var curRange = selection.getRangeAt(selection.rangeCount - 1);
        if (curRange.commonAncestorContainer.nodeType == 3 && curRange.startOffset > 0) {
            // we are in child selection. The characters of the text node is being deleted
            return;
        }

        var range = document.createRange();
        if (selection.anchorNode != this) {
            // selection is in character mode. expand it to the whole editable field
            range.selectNodeContents(this);
            range.setEndBefore(selection.anchorNode);
        } else if (selection.anchorOffset > 0) {
            range.setEnd(this, selection.anchorOffset);
        } else {
            // reached the beginning of editable field
            return;
        }
        range.setStart(this, range.endOffset - 1);


        var previousNode = range.cloneContents().lastChild;
        if (previousNode && previousNode.contentEditable == 'false') {
            // this is some rich content, e.g. smile. We should help the user to delete it
            range.deleteContents();
            event.preventDefault();
        }
    }
});

HTML:

<div id="editable" contenteditable="true">foo <span contenteditable="false">Text to delete</span> bar</div>

解决方案

('#editable').on('keydown', function (event) { if (window.getSelection && event.which == 8) { // backspace // fix backspace bug in FF // https://bugzilla.mozilla.org/show_bug.cgi?id=685445 var selection = window.getSelection(); if (!selection.isCollapsed || !selection.rangeCount) { return; } var curRange = selection.getRangeAt(selection.rangeCount - 1); if (curRange.commonAncestorContainer.nodeType == 3 && curRange.startOffset > 0) { // we are in child selection. The characters of the text node is being deleted return; } var range = document.createRange(); if (selection.anchorNode != this) { // selection is in character mode. expand it to the whole editable field range.selectNodeContents(this); range.setEndBefore(selection.anchorNode); } else if (selection.anchorOffset > 0) { range.setEnd(this, selection.anchorOffset); } else { // reached the beginning of editable field return; } range.setStart(this, range.endOffset - 1); var previousNode = range.cloneContents().lastChild; if (previousNode && previousNode.contentEditable == 'false') { // this is some rich content, e.g. smile. We should help the user to delete it range.deleteContents(); event.preventDefault(); } } });

HTML:

<div id="editable" contenteditable="true">foo <span contenteditable="false">Text to delete</span> bar</div>

这篇关于功能在Chrome中运行但在IE 11中无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！