javascript - Paste only plain-text into editable div - Stack Overflow

admin管理员组

文章数量:1314843

I need to be able to allow a user to paste into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but I want to discard formatting and only take the plain text.

I can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events.

The onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable.

I need to be able to allow a user to paste into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but I want to discard formatting and only take the plain text.

I can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events.

The onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable.

• javascript
• events
• text
• dom-events
• paste

Share Improve this question Follow edited Aug 22, 2021 at 20:08 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 24, 2010 at 2:08 big mo-mobig mo-mo 5111 silver badge22 bronze badges 2

• thanks both - should get me going in the right direction tried to mark the answers as useful but apparently i'm too new :/ – momo Commented Aug 24, 2010 at 11:19
• Possible duplicate of Javascript trick for 'paste as plain text` in execCommand – user Commented Nov 30, 2017 at 22:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

This is tricky but not impossible. What you can do is quite involved and a bit of a hack that will work in Firefox 2+, IE 5.5+ and recent WebKit browsers such as Safari 4 or Chrome (untested on older versions). Recent versions of both TinyMCE and CKEditor use this technique on their iframe-based editors:

1. Detect a ctrl-v / shift-ins event using a keypress event handler
2. In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn contentEditable off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste
3. Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns contentEditable back on, restores the user selection and pastes the text in.

Note that this will only work for keyboard paste events and not pastes from the context or edit menus. The paste event would be better but by the time it fires, it's too late to redirect the caret into the textarea (in some browsers, at least).

For Ctrl+v I checked the content of the editable div on keyup. You can modify the content in that event. I was using nicedit text editor. This did not work for paste from right click-> paste. For 'paste' I had to modify the content using settimeout.

.addEvent('paste', function(e) {
        setTimeout(function(){
            if(condition){
                //modify content
            }
        },350);
    });

It can also be hacked by using javaScript. Hope this helps

I created an example here

<div contentEditable="true" id="clean-text-div"> </div>
<div id="clean-btn"> Clean Me</div>
<div id="message"> paste html content and clean background HTML for pure text</div>


$("#clean-btn").click(function(){
    $("#clean-text-div").text($("#clean-text-div").text());
    $("#message").text("Your text is now clean");
});

Did you try the event such as "paste" or "input" ? Then you can use regex to trip all html tag

$(document).bind('paste', function(e){ alert('pasting!') })

http://www.hscripts./scripts/JavaScript/remove-html-tag.php

There is a discussion on paste event you should also read :
Catch paste input

You can use:

yourContentEditable.addEventListener('paste', handlePaste)

function handlePaste(e) {
    e.preventDefault()
    let text = e.clipboardData.getData("text/plain")
    document.execCommand("insertText", false, text)
}

execCommand seems to be deprecated nowaday. So be careful with it. But main browsers continue to support it.

本文标签： javascriptPaste only plaintext into editable divStack Overflow