34

I'm trying to read the contents of the clipboard using Javascript. With Internet Explorer it's possible using the function

window.clipboardData.getData("Text")

Is there a similar way of reading the clipboard in Firefox, Safari and Chrome?

Joeri
  • 1,701
  • 19
  • 16
Gil Faria
  • 700
  • 2
  • 7
  • 9
  • 1
    Sometimes. It depends on the setting of the Security option ‘Allow programmatic clipboard access’. In IE7's security default ‘Medium-high’ it's set to ask before allowing access. – bobince Oct 24 '08 at 14:23

5 Answers5

18

Safari supports reading the clipboard during onpaste events:

Information

You want to do something like:

someDomNode.onpaste = function(e) {
    var paste = e.clipboardData && e.clipboardData.getData ?
        e.clipboardData.getData('text/plain') :                // Standard
        window.clipboardData && window.clipboardData.getData ?
        window.clipboardData.getData('Text') :                 // MS
        false;
    if(paste) {
        // ...
    }
};
eyelidlessness
  • 58,600
  • 11
  • 86
  • 93
15

Online Spreadsheets hook Ctrl+C, Ctrl+V events and transfer focus to a hidden TextArea control and either set it contents to desired new clipboard contents for copy or read its contents after the event had finished for paste.

agsamek
  • 7,574
  • 11
  • 34
  • 42
  • How do you test for 'after the event had finished for paste'? – schwerwolf Jan 30 '09 at 21:30
  • 1
    Don't know. But since the entire method is not a piece of art in anyway I would sleep for 1 second ;) – agsamek Feb 23 '09 at 15:42
  • 3
    We just added (thanks to the above comment for inspiration) something like this in CodeMirror (http://marijn.haverbeke.nl/codemirror). It listens for onbeforepaste, creates a textarea, focuses it, sleeps 10 milliseconds, grabs the content, removes the textarea, returns the focus where it was before, and has its dirty way with the pasted text. Only works reliably on IE. By reacting to ctrl-V (and command-V) presses, you can also get it to work in FF and maybe some other browsers. – Marijn Aug 20 '09 at 13:22
  • 1
    @Marijn: I've used the same approach for an editor I'm working on and the hidden textarea trick works fine in all the major browers for keyboard pastes. Unfortunately IE fires `onbeforepaste` as soon as you open the context menu: have you managed to deal with this? – Tim Down Feb 16 '10 at 09:22
  • Does this explain how to copy from the clipboard? – Lee Goddard Mar 12 '18 at 20:04
2

NO. And if you do find a hack (e.g. old version of flash) do not depend on it.

Can I ask why you want to read from the clipboard? If the user wants to pass along the clipboard contents, all they need to do is paste.

scunliffe
  • 57,883
  • 24
  • 118
  • 156
  • 2
    I'm reading the clipboard on the onpaste event (in IE) to filter out invalid chars (eg. to remove whitespace from an integer value). – Gil Faria Oct 24 '08 at 15:01
  • 12
    use onchange on the field they're pasting into? – nickf Nov 10 '08 at 14:19
  • 1
    Well, this post is from 7 years ago. I'd just like to pass the information to anyone coming later that the __Midas Demo__ @ Mozilla will show you how to read the clipboard: http://www-archive.mozilla.org/editor/midasdemo/ NO FLASH. Gave it a try with a Wikipedia line - results were awesome. – syntaxerror Jan 12 '16 at 23:33
1

I believe people use a hidden Flash element to read the clipboard data from the browsers you mentioned.

Nick Berardi
  • 52,504
  • 14
  • 109
  • 135
  • This is definitely no longer true, if it ever was. Flash 9+ can only _write_ to the clipboard, not read from it. – James M. Greene Jan 17 '13 at 16:47
  • Clarification to my earlier comment: Flash 10+ can read from the clipboard but only during a user-initiated `paste` event (**NOT** following a user click, unlike for copying). – James M. Greene Sep 10 '13 at 03:19
1

Using @agsamek suggestion I created a little test snipped and got it to work. In my case I need to wait after a fresh pageload for pasted input, so I focus on an out-of-view textarea and read the text from there.

You could extend this to listen to specific keys (paste combination) and then focus on the hidden field. There would definitely more work to be done as I think you need to re-focus then on the last focused element and paste content there.

For my use-case though this was enough to make it work in latest Chrome and Firefox. Suggestions welcome.

https://jsfiddle.net/wuestkamp/91dxjv7s/11/

$(function () {

    $('body').prepend('<input type="text" id="hidden_textbox" style="position: absolute; width:0px; height: 0px; top: -100px; left: -100px">');

    var $hiddenTextbox = $('#hidden_textbox');
    $hiddenTextbox.focus();

    $(document).on('paste', function () {
        setTimeout(function () {
            var val = $hiddenTextbox.val();

            console.log('pasted: ' + val);

        }, 50);

    });

});
Kim
  • 1,156
  • 1
  • 11
  • 23