CODEWITHSUNDEEP
javascriptfirefox
Nima Keshavarzian
Nima Keshavarzian

Reputation: 473

navigator.clipboard.readText() is not working in Firefox

I have this code for paste:

navigator.clipboard.readText().then(
  clipText => document.querySelector("#Note").innerText += clipText);

But it returns this error:

Uncaught TypeError: navigator.clipboard.readText is not a function

Upvotes: 37

Views: 26358

Answers (3)

Realto619
Realto619

Reputation: 93

Even though navigator.clipboard.readText() is not supported in Firefox, I feel compelled to point out that you CAN copy something to the clipboard with Firefox using a different approach that doesn't require it being expressly enabled:

const copy = document.getElementById('copy');
const copy2 = document.getElementById('copy2');
const copyIt = document.getElementById('copyIt');

const copyToClipboard = (str) => {
  if (navigator 
      && navigator.clipboard 
      && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
    return Promise.reject("The Clipboard API is not available.");
};

copyIt.addEventListener('click', function() {
  copyToClipboard(copy.value);
  copy2.focus();
  copyIt.innerText = "Now right-click & paste into textarea above.";
});
  <textarea name="copy" id="copy" cols="30" rows="10" style="width:90vw;height:25px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quos, quae a dicta. Quibusdam autem debitis beatae laboriosam nemo illo aliquid. Itaque, doloremque, dicta. Culpa officiis illo cum quisquam rem.</textarea>
<textarea name="copy2" id="copy2" cols="30" rows="10" style="width:90vw;height:25px;"></textarea>
<br><button id="copyIt">Copy It</button>
I just wanted anyone that was having the same issues with Firefox as the OP to know that it was possible to do...

Upvotes: -1

maxime schoeni
maxime schoeni

Reputation: 2867

Reading clipboard on Firefox (version 94, nov 2021) doesn't seem to work and throws an error:

var promise = navigator.clipboard.readText();

// Uncaught TypeError: navigator.clipboard.readText is not a function

Documentation on MDN Web Docs suggests to grant permission via Permission API:

The "clipboard-read" permission of the Permissions API must be granted before you can read data from the clipboard.

But clipboard-read doesnt seem to be supported:

navigator.permissions.query({ name: "clipboard-read" });

// Uncaught TypeError: 'clipboard-read' is not a valid value for enumeration PermissionName.

The only way to enable clipboard reading (and writing) is to enable dom.events.testing.asyncClipboard on Firefox client:

  1. Enter about:config in navigation bar
  2. Click "Accept the Risk and Continue"
  3. Search dom.events.testing.asyncClipboard and set true

Upvotes: 26

vanowm
vanowm

Reputation: 10221

I'm guessing you are testing it in Firefox, in that case:

Firefox only supports reading the clipboard in browser extensions, using the "clipboardRead" extension permission.

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText#browser_compatibility

Upvotes: 23

Related Questions