123

I'd like to know a way to make my script detect the content of the clipboard and paste it into a text field when the page is opened, with no input from the user. How can it be done?

Gabriele Cirulli
  • 9,534
  • 23
  • 65
  • 97
  • 1
    possible duplicate of [Is it possible to read the clipboard in Firefox, Safari and Chrome using Javascript?](http://stackoverflow.com/questions/233719/is-it-possible-to-read-the-clipboard-in-firefox-safari-and-chrome-using-javascri) – a paid nerd Aug 30 '11 at 04:34
  • Please read here: http://stackoverflow.com/questions/233719/is-it-possible-to-read-the-clipboard-in-firefox-safari-and-chrome-using-javascri http://stackoverflow.com/questions/127040/copy-put-text-on-the-clipboard-with-firefox-safari-and-chrome – rmflow Jun 20 '11 at 14:49
  • 1
    Possible duplicate of [Is it possible to read the clipboard in Firefox, Safari and Chrome using Javascript?](https://stackoverflow.com/questions/233719/is-it-possible-to-read-the-clipboard-in-firefox-safari-and-chrome-using-javascr) – Lee Goddard Mar 12 '18 at 20:03
  • You cannot really know what is in the clipboard of a user unless you used some sort of flash backend when they copied the text. ------- **Update:** [A more _correct_ answer here](https://stackoverflow.com/a/6413100/561731) – Naftali aka Neal Jun 20 '11 at 14:48

4 Answers4

82

Use the new clipboard API, via navigator.clipboard. It can be used like this:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Or with async syntax:

const text = await navigator.clipboard.readText();

Keep in mind that this will prompt the user with a permission request dialog box, so no funny business possible.

The above code will not work if called from the console. It only works when you run the code in an active tab. To run the code from your console you can set a timeout and click in the website window quickly:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

Read more on the API and usage in the Google developer docs.

Spec

Community
  • 1
  • 1
iuliu.net
  • 5,195
  • 3
  • 36
  • 63
78

window.clipboardData.getData('Text') will work in some browsers. However, many browsers where it does work will prompt the user as to whether or not they wish the web page to have access to the clipboard.

Dave
  • 4,330
  • 3
  • 21
  • 30
19

You can use

window.clipboardData.getData('Text')

to get the content of user's clipboard in IE. However, in other browser you may need to use flash to get the content, since there is no standard interface to access the clipboard. May be you can have try this plugin Zero Clipboard

Lucas
  • 15,579
  • 27
  • 98
  • 170
Ricky Jiao
  • 505
  • 3
  • 10
3

Following will give you the selected content as well as updating the clipboard.

Bind the element id with copy event and then get the selected text. You could replace or modify the text. Get the clipboard and set the new text. To get the exact formatting you need to set the type as "text/hmtl". You may also bind it to the document instead of element.

document.querySelector('element').bind('copy', function(event) {
  var selectedText = window.getSelection().toString(); 
  selectedText = selectedText.replace(/\u200B/g, "");

  clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
  clipboardData.setData('text/html', selectedText);

  event.preventDefault();
});
GalaxyCat105
  • 2,105
  • 4
  • 12
  • 26
  • 26
    Welcome to this site! I'm glad that you are contributing by answering on a question. But please be aware that your answer does not really answer the OP's question. The question is *retrieving* content from the clipboard and paste it somewhere when opening a page. Also, since the question does not have a [tag:jquery] tag, answers with jQuery should contain a note that a library (jQuery) is used. – KarelG Aug 24 '17 at 09:17
  • This is to select a data from a webpage and set it to the clipboard, the question is to pull the clipboard data (it can be from any source) so we should be able to get the data from the clipboard no matter from where it's copied. – balaji dileep kumar Apr 05 '21 at 11:44