HTML5 contenteditable div 只接受纯文本答案

【问题标题】：HTML5 contenteditable div accept only plaintextHTML5 contenteditable div 只接受纯文本
【发布时间】：2014-08-15 23:29:11
【问题描述】：

我正在尝试创建一个 HTML5 内容可编辑的 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);
   });
 });

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

我也试过

(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中输入数据。它应该显示为文本。

【问题讨论】：

看看使用这个概念：$('<p>Hi, I\'m <abbr title="Hypertext Markup Language">HTML</abbr></p>').text();。那应该给你Hi, I'm HTML。
我的评论涵盖了“将其转换为纯文本”部分。对于您正在尝试做的事情，我没有任何使用 JavaScript API 的经验，但是当我阅读这个问题时，我无法理解您遇到的问题。例如，“now working for IE”应该读作“not working for IE?”
加contendeditable='plaintext-only'
不幸的是，contenteditable='plaintext-only' 似乎是 webkit 独有的功能。
plaintext-only 可能有一天会被标准化：github.com/w3c/editing/issues/162

标签： javascript jquery html

【解决方案1】：

试试这个：

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

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

【讨论】：

我猜只有 Webkit。规范只允许真、假和继承。 MDN（内有 3 个规格）

【解决方案2】：

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

&lt;div contenteditable="true" style="border: dashed 1px grey"&gt;Editable&lt;/div&gt;

请注意，此解决方案受到严重限制，因为插入符号通常会在每个输入事件上跳转到文本的开头。

【讨论】：

要解决光标问题，您可以使用 rangy: before: let range = rangy.getSelection().getRangeAt(0) after: if (el.hasChildNodes()) { newRange.setStart(el.childNodes[0], Math.min(range.startOffset)); newRange.collapse(true); rangy.getSelection().setSingleRange(newRange); }
另一种方法是仅定位 paste 事件

【解决方案3】：

受@humanityANDpeace 回答的启发，我想出了这个：

function convertToPlaintext() {
  this.innerHTML = this.innerText.replace(/(?:\r\n|\r|\n)/g, '<br>');
  this.focus();
  document.execCommand('selectAll', false, null);
  document.getSelection().collapseToEnd();}

调用者：

ele.addEventListener("input", convertToPlaintext, false);

其中 'ele' 是您的 contentEditable div。这将用<br> 替换任何换行符，并在您键入时将光标保持在文本的末尾。我的主要动机是替换所有 'contentEditable' 添加但仍保留换行符的 div 标签。

“替换换行符”来自：https://stackoverflow.com/a/784547/2677034

【讨论】：