Get current clipboard content?

JavascriptClipboardPaste

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

With async/await syntax:

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

Or with Promise syntax:

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

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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

Bind the element id with a copy event and then get the selected text. You can 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/html". 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();
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGabriele CirulliView Question on Stackoverflow
Solution 1 - Javascriptiuliu.netView Answer on Stackoverflow
Solution 2 - JavascriptDaveView Answer on Stackoverflow
Solution 3 - JavascriptRicky JiaoView Answer on Stackoverflow
Solution 4 - JavascriptSollymanul IslamView Answer on Stackoverflow