HTML5 contenteditable div只接受纯文本

Question

我正在尝试创建一个HTML5 contenteditable div，它只接受纯文本。我使用HTML和jQuery如下：

HTML

<div contenteditable="true"></div> 

jQuery的

(function() { 
    $('[contenteditable]').on('paste', function (e) { 
    e.preventDefault(); 
    var text = null; 
    text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here'); 
    document.execCommand("insertText", false, text); 
    }); 
}); 

但它不工作的所有浏览器。在Internet Explorer浏览器中不支持getData。我在这里提到了很多解决方案，但没有为我工作。

我也试过

(function() { 
    $('[contenteditable]').on('paste', function (e) { 
    e.preventDefault(); 
    var text = null; 

    if (window.clipboardData && clipboardData.setData) { 
     text = window.clipboardData.getData('text'); 
    } else { 
     text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here'); 
    } 
    document.execCommand("insertText", false, text); 
    }); 
}); 

但在这种情况下，document.execCommand("insertText", false, text);不工作的IE浏览器。

有什么办法可以在过滤HTML标签后接受数据，以便任何人通过类型，粘贴，放置或其他方式将数据输入到可编辑div中。它应该显示为文本。

Answer 1

不是jQuery的忠实粉丝，我的解决方案不会使用它。反正这里有云（应该反正工作，因为纯JavaScript）：

function convertToPlaintext() { 
 
    var textContent = this.textContent; 
 
    this.innerHTML = ""; 
 
    this.textContent = textContent; 
 
} 
 

 
var contentEditableNodes = document.querySelectorAll('[contenteditable]'); 
 

 
[].forEach.call(contentEditableNodes, function(div) { 
 
    div.addEventListener("input", convertToPlaintext, false); 
 
});

Answer 2

试试这个：

<div contenteditable="plaintext-only"></div> 

参考：https://w3c.github.io/editing/contentEditable.html#h-contenteditable