contenteditable下code标签的删除

contenteditable


发表于 2019-09-05 13:24


测试地址:https://www.qyh.me/contenteditable-inlinetag-delete

Chrome

版本信息: 76.0.3809.132 win10

chrome_inlinetag_delete.gif

通过查看元素可以看到,chrome下虽然顺利删除了code标签,但是删除之后再次输入时会出现伪装的像code标签一样的span标签

Firefox

版本信息:68.0.2 win10

firefox_inlinetag_delete.gif

通过查看元素可以看到,firefox甚至都没有删除code标签

解决方法,针对chrome浏览器,可以通过document.execCommand('removeFormat')来解决,而针对firefox,则必须监听 keyboard 事件,最后代码如下:

  var element = document.querySelector('[contenteditable]');
  var code = element.querySelector('code');
  var set = new Set(['code']);
  var inlineBackspaceListener = function(e){
    if(e.key == 'Backspace'){
      var sel  =window.getSelection();
      if(sel.rangeCount == 0) return ;
      var range = sel.getRangeAt(0);
      var ancestor = range.commonAncestorContainer;
      var parent = ancestor.parentNode;
      if(parent != null && parent.nodeType == 1 && set.has(parent.tagName.toLowerCase())){
        var textContent = parent.textContent;
        if(textContent.length == 1){
          e.preventDefault();
          e.stopPropagation();
          sel.removeAllRanges();
          range.setStartBefore(code);
          range.setEndAfter(code);
          sel.addRange(range);
          document.execCommand('removeFormat');
          range.deleteContents();
        }
      }
    }
  }
  
 element.addEventListener('keydown',inlineBackspaceListener);

测试地址:https://www.qyh.me/contenteditable-inlinetag-delete?v


搜索