Why is document.execCommand("paste") not working in Google Chrome?

Asked
Active3 hr before
Viewed126 times

9 Answers

working
90%

We cant access clipboard from javascript instead IE for chrome and other browsers. ,The command triggers a paste action into the focused element in the background page. You have to create a TEXTAREA or DIV contentEditable=true in the background page and focus it to receive the paste content. , Word for anyone inside a car or bus, both passengers and driver ,The hack for this is very simple: create own custom clipboard which store text on cut and from where we paste it directly

Here is one example of how to read the clipboard text in the background page:

bg = chrome.extension.getBackgroundPage(); // get the background page
bg.document.body.innerHTML = ""; // clear the background page

// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;

// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();

// trigger the paste action
bg.document.execCommand("Paste");

// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;
load more v
88%

document.execCommand("paste");,With Nightly and FF 57.04 It seems that the command,is not working on same page:,Strangely it is not consistent: when I load a page the it does not work but it seems that if I run a document.execCommand('copy', false, null); on the same page using my extension without reloading, then the paste command succeed …

is not working on same page:

   area = document.createElement("textarea");
   area.setAttribute("id", "fcb_txt_area");
   if (field) {
      field.parentNode.append(area);
   } else {
      document.body.appendChild(area);
   }
   area.contentEditable = true;
   area.textContent = '';
   area.select();
   console.log('Pre-paste: ' + area.value);
   document.execCommand("paste");
   var value = area.value;
   console.log('Post-paste: ' + area.value);
   return value;
load more v
72%

The Clipboard API gives Web applications a way to react on cut, copy and paste operations performed by the user as well as read from or write to the system clipboard directly on behalf of user.,Use the forms below for programmatic clipboard access or invoke standard copy/cut/paste operations with your keyboard.,Image support for the async clipboard API,Clipboard (Copy & Paste)

load more v
65%

This no longer works in Google Chrome,If Internet Explorer is used as the client browser then you should be be prompted with this message when you first try to copy or paste.,Once you allow access once on that particular page, then you should not be prompted during any subsequent copiers or pastes during that session.,Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!

The guts of what is used on this page...

function pasteit(theField) {
   var editor = document.getElementById("ta1");
   editor.focus();
   editor.select();

   document.execCommand('Paste');
}

function copyToClipboard(s) {
   var input = document.getElementById("ta1");
   input.focus();
   input.select();
   document.execCommand('Copy');

   if (document.selection) {
      document.selection.empty();
   } else if (window.getSelection) {
      window.getSelection().removeAllRanges();
   }
}
75%

You can play with the Async Clipboard API in the demos below or directly on Glitch.,Security and permissions,The first example demonstrates moving text on and off the clipboard.,The Async Clipboard API is limited to handling text and images. Chrome 84 introduces an experimental feature that allows the clipboard to handle any arbitrary data type.

async function copyPageUrl() {
   try {
      await navigator.clipboard.writeText(location.href);
      console.log('Page URL copied to clipboard');
   } catch (err) {
      console.error('Failed to copy: ', err);
   }
}
load more v
40%

clipboard access is synchronous, which has performance and security implications,Unfortunately, there are some problems:,Accessing the clipboard programmatically raises several security concerns:,The API is only available to the active browser tab (not background tabs) and can only be triggered by a user interaction such as a click. When necessary, the user will be prompted for permission to read clipboard data:

To avoid potential issues, the Clipboard API can only be used on pages served over HTTPS (localhost is also permitted). When running in an iframe, the parent page must also grant clipboard-read and/or clipboard-write permissions:

<iframe src="childpage.html" allow="clipboard-read; clipboard-write"></iframe>
load more v
22%

On Chrome document.execCommand('paste') will work the same way but requires an extension to be installed to allow it. Without extension, it won't work. To allow it, you need to include this "clipboarRead" in the permissions in your manifest.json file. Like this:,I tried to create a RichText Editor using jQuery with the help of execCommand().,Are there any possibilities to do the Cut, Copy and Paste actions using execCommand() or there is any other method to do the Cut, Copy and Paste actions in my RichText Editor?,Note** this option does not delete the question immediately,Since others contribution also matters and security reasons.Your request will be Queued.We will review the question and remove.It may take some days.

But the following code:

document.execCommand('cut', false, null);

document.execCommand('copy', false, null);

document.execCommand('paste', false, null);
load more v
60%

If you want to copy text with document.execCommand('copy'):,To read from the Clipboard use readText():,Individual commands for reading and writing from the Clipboard.,Fortunately there’s an up and coming solution. It’s an entirely new way to read and write data from the Clipboard.

Copy and paste has a strange history on the web. There’s no real standard. Most browsers have settled on document.execCommand('copy') and document.execCommand('paste'). While that seems easy enough, there’s some (justified) weirdness.

const result = document.executeCommand('copy');
load more v
48%

Раньше в Chrome был экспериментальный буфер обмена API, но он был удален в Chrome 13. ,Chrome перешел к более стандартным командам document.execCommand('paste') , document.execCommand('copy') и document.execCommand('cut') : https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla#Выполнение%5 команд , document.execCommand('copy') не работает на Chrome ,Вы можете определить возможные команды с помощью метода document.queryCommandSupported.

Пока что у меня есть вот это:

function pasteAndGo() {
   document.execCommand('paste')
   alert("Pasted")
}
load more v

Other "working-undefined" queries related to "Why is document.execCommand("paste") not working in Google Chrome?"