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

user_657676 0
Viewed 53601

I have a problem with my extension. I want to paste data from the clipboard.

So far, I've got this:

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

The alert comes up, but nothing has been pasted.

I've got a feeling it's the document part that needs changing, but I don't know what to do. Any ideas?

google-chrome-extension google-chrome clipboard javascript
7 Answers

Calling document.execCommand("paste") is not supported by "reasonable" browsers, because of security concerns as it might enable the script to read sensitive data (like passwords) from the clipboard.

This is the compatibility matrix of document.execCommand("...") concerning clipboard events:

"copy" "paste" "cut"
IE OK OK n/a
Edge OK n/a OK
Firefox OK n/a OK
Chrome OK n/a OK

My two cents to this:

  • The behaviour of Edge, Firefox and Chrome is "reasonable" as they prevent pasting/reading data from the clipboard. They do enable cut, as cut is simply a copy followed by a delete.
  • The behaviour of IE makes no sense to me, as it enables the "risky" paste, but does not execute the cut event.

You can feature detect the possible commands using the document.queryCommandSupported method.

Edit: According to MDN document.queryCommandSupported is now deprecated and should no longer be used.

user_4347420

You can mimic a paste by doing the same thing yourself by hand:

  1. Optional: trigger when the user tries to paste
  2. Get the contents of the clipboard (requires permission from user via a pop-up the browser will provide)
  3. Insert content into the active control
  4. Optional: trigger the events a real paste would have triggered (for the benefit of any listeners)

Focusing on steps #2 and #3 first, in this example, I check whether the active element is a text input. If so, I simulate a paste by replacing that text box's highlighted content and repositioning the cursor.

function myPaste() {
  navigator.clipboard.readText()
    .then(clipText => {
      const el = document.activeElement;
      if (el.nodeName === 'INPUT') {
        const newCursorPos = el.selectionStart + clipText.length;
        el.value =
          el.value.substring(0, el.selectionStart) +
          clipText +
          el.value.substring(el.selectionEnd);
        el.setSelectionRange(newCursorPos, newCursorPos);
      }
    });
}

For #1, add a listener to intercept the user's paste attempts:

addEventListener("paste", pasteHandler);

function pasteHandler(e) {
  e.preventDefault();
  myPaste();
}

For #4, add this after el.setSelectionRange(newCursorPos, newCursorPos);:

el.dispatchEvent(new Event('input'));
el.dispatchEvent(new Event('change'));

Note that if you are using a reactive framework that manipulates the DOM on your behalf based on data binding, you will need to defer the cursor position update until after the next DOM render. For instance:

Vue.nextTick(() => {
  el.setSelectionRange(newCursorPos, newCursorPos);
});
user_54059670
Related