HTML5 contenteditable div只接受纯文本 [英] HTML5 contenteditable div accept only plaintext

问题描述

我正在尝试创建 HTML5 contenteditable div，它只接受纯文本。我在下面使用了html和jQuery：

HTML

 < div contenteditable =true>< / div> 
  

jQuery
< $（$'$'$ $ $ $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$。
var text = null;
text =（e.originalEvent || e）.clipboardData.getData（'text / plain'）|| prompt（'Paste Your Text Here'）;
document.execCommand（insertText，false，text）;
}）;
}）;

但它不适用于所有浏览器。 getData 在Internet Explorer浏览器中不支持。我在stackoverflow上尝试了很多解决方案，但没有一个适用于我。

我也试过了

<$ p （'paste'，function（e）{
e.preventDefault（）; $ b（$ {
$（'[contenteditable]'）。 $ b $ 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中的数据。它应该显示为文本。

解决方案

不是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）;}） ;

I'm trying to create a HTML5 contenteditable div, which only accept a plain text. I'm using html and jQuery below:

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);
   });
 });

But it's not working for all browsers. getData not support in Internet Explorer browser. I tried a lot of solutions mention here on stackoverflow, But none worked for me.

I also tried

(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);
  });
});

But in that case document.execCommand("insertText", false, text); is not working for IE.

Is there any way to make it possible to accept data after filter HTML tags, So that anyone enters data in editable div by type, paste, drop, or any other way. It should display it as text.

解决方案

Being not a big fan of jQuery, my solution will not make any use of it. Anyway here it goes (it should anyway work, as pure 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);
});

这篇关于HTML5 contenteditable div只接受纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！