blocks|key|822396|text|你试过使用innerText吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822397|添加：|822398|如果您想从粘贴到可编辑div中的内容中剥离标记，可以尝试一下创建临时div的老方法--参见下面的示例。|822399|<!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>|code-block|syntax|javascript|822400|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Have you tried using innerText?</p>

<p>ADDED:</p>

<p>If you want to strip markup from content pasted into the editable div, try the old hack of creating a temporary div -- see example below.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt; 
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
  &lt;title&gt;Strip editable div markup&lt;/title&gt;

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

&lt;body&gt;
  &lt;div id="editableDiv" contentEditable="true"&gt;&lt;/div&gt;
  &lt;input type="button" value="press" onclick="alert(strip(document.getElementById('editableDiv').innerText));" /&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>


blocks|key|607389|text|你不能访问系统剪贴板，所以你需要一个黑客。请看这个问题：JavaScript+get+clipboard+data+on+paste+event+(Cross+browser)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|607390|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059^0|S|1O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can't access the system clipboard so you'll need a hack. See this question: <a href="https://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059">JavaScript get clipboard data on paste event (Cross browser)</a></p>


blocks|key|822477|text|使用Jquery，您可以使用.text()方法，因此，例如，当模糊时，您可以用文本内容替换内容|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|822478|$("#element").blur(function(e)+{
++++$(this).html($(this).text());
});|code-block|syntax|javascript|822479|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/text/^0|E|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>With Jquery you can use <a href="http://api.jquery.com/text/" rel="nofollow">.text()</a> method, so, when blur for example you can replace the content with the text content</p>

<pre><code>$("#element").blur(function(e) {
    $(this).html($(this).text());
});
</code></pre>


blocks|key|822530|text|我寻找这个问题的答案已经很久了，最后写了我自己的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822531|我希望这对其他人有帮助。在写这篇文章的时候，它似乎可以在ie9，最新的chrome和火狐上运行。|822532|<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>|code-block|syntax|javascript|822533|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Was looking for answer to this for ages and ended up writing my own.</p>

<p>I hope this helps others. At the time of writing this it appears to work in ie9, latest chrome and firefox. </p>

<pre><code>&lt;div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" /&gt;

&lt;script type="text/javascript"&gt;

    var _onPaste_StripFormatting_IEPaste = false;

    function OnPaste_StripFormatting(elem, e) {

        if (e.originalEvent &amp;&amp; e.originalEvent.clipboardData &amp;&amp; e.originalEvent.clipboardData.getData) {
            e.preventDefault();
            var text = e.originalEvent.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (e.clipboardData &amp;&amp; e.clipboardData.getData) {
            e.preventDefault();
            var text = e.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (window.clipboardData &amp;&amp; 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;
        }

    }

&lt;/script&gt;
</code></pre>


blocks|key|607557|text|document.querySelector('div[contenteditable="true"]').addEventListener("paste",+function(e)+{
++++++++e.preventDefault();
++++++++var+text+=+e.clipboardData.getData("text/plain");
++++++++document.execCommand("insertHTML",+false,+text);
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|607558|这很简单:向"paste“事件添加一个侦听器，并重新格式化剪贴板内容。|unstyled|607559|下面是body中所有容器的另一个示例：|607560|[].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);
});|607561|干杯。|607562|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

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

<p>It is simple: add a listener to the "paste" event and reeformat clipboard contents. </p>

<p>Here another example for all containers in the body:</p>

<pre><code>[].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);
});
</code></pre>

<p>Saludos. </p>


blocks|key|822676|text|我想将我的解决方案添加到这个问题中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822677|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%2B%2B)+{
++++++++if(children[i]+==+range.commonAncestorContainer+%7C%7C+children[i]+==+range.commonAncestorContainer.parentNode)+{
++++++++++caretPos+%2B=+range.endOffset;
++++++++++keepLooping+=+false;
++++++++}+else+{
++++++++++caretPos+%2B=+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);
++++}
++}
});|code-block|syntax|javascript|822678|(这与旧版本的IE不兼容)|822679|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I'd like to add my solution to this issue:</p>

<pre><code>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);
    }
  }
});
</code></pre>

<p>(this isn't compatible with older versions of IE)</p>


blocks|key|607671|text|我知道已经有一段时间了，但我也有同样的问题。在我的例子中，它是一个GWT应用程序，这使情况变得更糟。无论如何，通过以下方式解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|607672|var+clearText+=+event.clipboardData.getData('text/plain');
document.execCommand('inserttext',+false,+clearText);|code-block|syntax|javascript|607673|请参阅：https://jsfiddle.net/erikwoods/Ee3yC/|offset|length|607674|我更喜欢“insert+text”命令而不是"insertHTML“命令，因为文档中说它恰好是插入纯文本，所以看起来更合适。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand|607675|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/erikwoods/Ee3yC/|1|https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand^0|0|0|4|11|0|0|1T|1X|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>I know it's been a while, but I had the same problem. On my case, it's a GWT application to make it even worse.
Anyway, resolved the problem with:</p>

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

<p>See: <a href="https://jsfiddle.net/erikwoods/Ee3yC/" rel="nofollow noreferrer">https://jsfiddle.net/erikwoods/Ee3yC/</a></p>

<p>I preferred "inserttext" command instead of "insertHTML", because the documentation says it's exactly to insert plain text, so seems more suitable.
See <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand</a></p>


blocks|key|822744|text|试试<div+id="editableDiv"+contentEditable="plaintext-only"></div>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|822745|entityMap^0|2|1P|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Try <code>&lt;div id="editableDiv" contentEditable="plaintext-only"&gt;&lt;/div&gt;</code></p>


blocks|key|607773|text|只是为了我以后的生活。;)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|607774|styles.css|offset|length|style|CODE|607775|/*+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;
}|code-block|syntax|javascript|607776|index.html|607777|
<div+class="contenteditable_div"+contenteditable="true"+id="blubbi">abc</div>|607778|script.js|607779|//+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());
});|607780|请记住，此解决方案不支持或不关心换行符。|607781|请记住，像这样设置文本会在您键入时将光标设置到可编辑div的开头。如果你只需要复制和粘贴，这仍然是一个很好的解决方案。如果你对这个“反向输入问题”有一个简单的解决方案，请写一篇评论(请在10行代码以内)。;)|607782|在Firefox+89、Chrome+90和Safari+14上进行了测试。|607783|entityMap^0|0|0|A|0|0|0|A|0|0|0|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1H|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|11|$]]

<p>Just for my later life. ;)</p>
<p><code>styles.css</code></p>
<pre><code>/* 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;
}
</code></pre>
<p><code>index.html</code></p>
<pre><code>&lt;!-- Firefox doesn't support contenteditable=&quot;plaintext-only&quot; yet! --&gt;
&lt;div class=&quot;contenteditable_div&quot; contenteditable=&quot;true&quot; id=&quot;blubbi&quot;&gt;abc&lt;/div&gt;
</code></pre>
<p><code>script.js</code></p>
<pre><code>// 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());
});
</code></pre>
<p>Keep in mind that this solution doesn't support or care about line breaks.</p>
<p>And keep in mind that setting the text like this will set the cursor to the beginning of your contenteditable div - while you are typing. Still a good solution if you need it only for copy &amp; paste. Please write a comment if you have an easy solution for this &quot;reverse typing problem&quot; (under 10 lines of code please). ;)</p>
<p>Tested on Firefox 89, Chrome 90 and Safari 14.</p>


<p>I have a contentEditable Div and I want remove any formatting especially for copy and paste text.</p>


Remove formatting from a contentEditable div

容器

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

问从contentEditable div中删除格式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从contentEditable div中删除格式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从contentEditable div中删除格式
EN