Question

我有一个contentEditable Div，我想要删除任何格式，特别是复制和粘贴文本。

Answer 1

document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    });

很简单：在＆＃34;粘贴＆＃34;添加一个监听器事件和重新格式化剪贴板内容。

这是身体中所有容器的另一个例子：

[].forEach.call(document.querySelectorAll('div[contenteditable="true"]'), function (el) {
    el.addEventListener('paste', function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    }, false);
});

Saludos。

Answer 2

您是否尝试过使用innerText？

增加：

如果要从粘贴到可编辑div中的内容中剥离标记，请尝试创建临时div的旧hack - 请参阅下面的示例。

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Strip editable div markup</title>

<script type="text/javascript">
function strip(html) {
    var tempDiv = document.createElement("DIV");
    tempDiv.innerHTML = html;
    return tempDiv.innerText;
}

</script>
</head>

<body>

<div id="editableDiv" contentEditable="true"></div>

<input type="button" value="press" onclick="alert(strip(document.getElementById('editableDiv').innerText));" />

</body>

</html>

Answer 3

多年来一直在寻找答案，最后写下了自己的答案。

我希望这有助于其他人。在撰写本文时，它似乎适用于ie9，最新的chrome和firefox。

<div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" />

<script type="text/javascript">

                var _onPaste_StripFormatting_IEPaste = false;

                function OnPaste_StripFormatting(elem, e) {

                    if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
                        e.preventDefault();
                        var text = e.originalEvent.clipboardData.getData('text/plain');
                        window.document.execCommand('insertText', false, text);
                    }
                    else if (e.clipboardData && e.clipboardData.getData) {
                        e.preventDefault();
                        var text = e.clipboardData.getData('text/plain');
                        window.document.execCommand('insertText', false, text);
                    }
                    else if (window.clipboardData && window.clipboardData.getData) {
                        // Stop stack overflow
                        if (!_onPaste_StripFormatting_IEPaste) {
                            _onPaste_StripFormatting_IEPaste = true;
                            e.preventDefault();
                            window.document.execCommand('ms-pasteTextOnly', false);
                        }
                        _onPaste_StripFormatting_IEPaste = false;
                    }

                }

    </script>

Answer 4

使用Jquery，您可以使用.text()方法，因此，当模糊时，您可以使用文本内容替换内容

$("#element").blur(function(e) {
    $(this).html($(this).text());
});

Answer 5

我知道已经有一段时间了，但我遇到了同样的问题。就我而言，它是一个GWT应用程序，使其更糟糕。无论如何，用以下方法解决了问题：

var clearText = event.clipboardData.getData('text/plain');
document.execCommand('inserttext', false, clearText);

请参阅：https://jsfiddle.net/erikwoods/Ee3yC/

我首先使用“inserttext”命令而不是“insertHTML”，因为文档说它完全是插入纯文本，所以看起来更合适。见https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Answer 6

尝试<div id="editableDiv" contentEditable="plaintext-only"></div>

Answer 7

您无法访问系统剪贴板，因此您需要进行黑客攻击。请参阅此问题：JavaScript get clipboard data on paste event (Cross browser)

Answer 8

我想在这个问题上添加我的解决方案：

ContentEditableElement.addEventListener('input', function(ev) {
  if(ev.target.innerHTML != ev.target.textContent) {

    // determine position of the text caret
    var caretPos = 0,
      sel, range;
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      var children = ev.target.childNodes;
      var keepLooping = true;
      for(let i = 0; keepLooping; i++) {
        if(children[i] == range.commonAncestorContainer || children[i] == range.commonAncestorContainer.parentNode) {
          caretPos += range.endOffset;
          keepLooping = false;
        } else {
          caretPos += children[i].textContent.length;
        }
      }

      // set the element's innerHTML to its textContent
      ev.target.innerHTML = ev.target.textContent;

      // put the caret where it was before
      range = document.createRange();
      range.setStart(ev.target.childNodes[0], caretPos);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
});

（这与旧版本的IE不兼容）

Answer 9

只是为了我以后的生活。 ;)

styles.css

/* Not easy to look exactly like input field: */
/* https://stackoverflow.com/a/8957518/1707015 */
.contenteditable_div {
    /* box-shadow: 1px 1px 1px 0 lightgray inset; */
    background-color:#dddddd;
    overflow-wrap:break-word;
    padding:3px;
}

index.html

<!-- Firefox doesn't support contenteditable="plaintext-only" yet! -->
<div class="contenteditable_div" contenteditable="true" id="blubbi">abc</div>

script.js

// Optional: Copy font from other input field:
// $('#blubbi').css('font', $('#blubbi_input_field').css('font'));

$('.contenteditable_div').on('input', function(){
    // problems with setting cursor to beginning of div!
    // this.innerHTML = this.innerText;
    $(this).text($(this).text());
});

请记住，此解决方案不支持也不关心换行符。

请记住，像这样设置文本会将光标设置到可编辑的 div 的开头 - 在您键入时。如果您只需要复制和粘贴，仍然是一个很好的解决方案。如果您对这个“反向输入问题”有一个简单的解决方案（请在 10 行代码以内），请发表评论。 ;)

在 Firefox 89、Chrome 90 和 Safari 14 上测试。

Answer 10

<p spellcheck="false" contentEditable onkeydown="return false">text</p>

从contentEditable div中删除格式

10 个答案: