JavaScript Get Clipboard Data on Paste Event (Cross Browser)

JavaScript get clipboard data on paste event (Cross browser)

The situation has changed since writing this answer: now that Firefox has added support in version 22, all major browsers now support accessing the clipboard data in a paste event. See Nico Burns's answer for an example.

In the past this was not generally possible in a cross-browser way. The ideal would be to be able to get the pasted content via the paste event, which is possible in recent browsers but not in some older browsers (in particular, Firefox < 22).

When you need to support older browsers, what you can do is quite involved and a bit of a hack that will work in Firefox 2+, IE 5.5+ and WebKit browsers such as Safari or Chrome. Recent versions of both TinyMCE and CKEditor use this technique:

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 designMode 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 designMode 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. By the time the paste event fires, it's too late to redirect the caret into the textarea (in some browsers, at least).

In the unlikely event that you need to support Firefox 2, note that you'll need to place the textarea in the parent document rather than the WYSIWYG editor iframe's document in that browser.

Javascript - Get paste data before the paste event

Support for accessing the system clipboard in JavaScript, even in modern browsers, is sketchy at best. A reliable cross-browser solution in JavaScript, in my experience, is likely impossible.

I believe older versions of Internet Explorer (urrgggh) exposed the system clipboard through:

window.clipboardData.getData('Text');

Note that in many modern production situations where the system clipboard is accessed, the code snippets here for example, a small embedded Adobe Flash app (urrrrgh) is used and styled like a native button. I'm sure you've encountered a similar thing on your travels.

Though it seems to be the only well-adopted modern solution to this problem, I would not recommend using Adobe Flash. It's old technology.

Here is an old link describing how you could potentially accomplish clipboard access with Adobe Flash (unfortunately I'm not a Flash expert so I cannot provide an example)

how to get an image with text on paste event

i change my paste function for what "first last" told me:

const PasteFunction = (event) => {
  var text = (event.originalEvent || event).clipboardData.getData(
    "text/html"
  );
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, "text/html");
  var image = doc.querySelector("img");
  if (image) {
    event.preventDefault();
    return;
  }
  document.execCommand("insertHTML", true, text);
};

Paste event listener on Internet Explorer getting wrong arguments

EDIT

$(document).ready(function(){
    var editable = document.getElementById('editable-div');
    var pasteHandler = function(e){
        if(e.clipboardData && e.clipboardData.getData) {
            var pastedText = "";
            if (window.clipboardData && window.clipboardData.getData) { // IE
                pastedText = window.clipboardData.getData('Text');
            } else if (e.clipboardData && e.clipboardData.getData) {
                pastedText = e.clipboardData.getData('text/plain');
            }

            alert(pastedText);
        }
        else{
            alert('Not paste object!');
        }
    };
    editable.addEventListener('paste', pasteHandler, false);
});

here I handle the IE Version and the other browsers as well.

JSFiddle

Update the clipboard data before paste (not the 'paste' event)

You could set the editor content directly and call e.preventDefault();

I think updating the clipboard data will not work.

---

Related Topics