reactjs - How to get the content from clipboard on Firefox in Javascript - Stack Overflow

admin管理员组

文章数量:1415484

I am very frustrated to make Paste from the clipboard on my React app.

I used navigator.clipboard.readText(), which works perfectly on Chrome browser. But it doesn't work on my latest Firefox browser.

I tried to search SO and there are few posts related to it. But all of them don't make me happy.

According to MDN documentation, it says:

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

But I really don't know how to enable it.

Could you help me out with this issue? Is there any good library for it?

Thanks in advance.

I am very frustrated to make Paste from the clipboard on my React app.

I used navigator.clipboard.readText(), which works perfectly on Chrome browser. But it doesn't work on my latest Firefox browser.

I tried to search SO and there are few posts related to it. But all of them don't make me happy.

According to MDN documentation, it says:

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

But I really don't know how to enable it.

Could you help me out with this issue? Is there any good library for it?

Thanks in advance.

• javascript
• reactjs

Share Improve this question Follow asked Sep 5, 2022 at 17:49 Liki CrusLiki Crus 2,07255 gold badges1818 silver badges3232 bronze badges 2

• I'm afraid that the New API is only supported in browser extensions as the MDN docs, so your only hope is to use the old synchronous API only on Firefox – niceman Commented Sep 5, 2022 at 17:58
• Here is the same problem explained: stackoverflow./questions/67440036/… – greenoldman Commented Mar 17, 2024 at 14:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

What I did in one of my projects is to register an eventListener for the document to handle the paste event in a useEffect hook.

  useEffect(() => {
    const pasteFn = (event) => {
      const data = event.clipboardData.items;
      for (let i = 0; i < data.length; i += 1) {
        if (data[i].kind === 'string' && data[i].type.match('^text/plain')) {
          data[i].getAsString((str) => console.log('text/plain', str));
        } else if (data[i].kind === 'string' && data[i].type.match('^text/html')) {
          data[i].getAsString((str) => console.log('html', str));
        } else if (data[i].kind === 'string' && data[i].type.match('^text/uri-list')) {
          data[i].getAsString((str) => console.log('uri', str));
        } else if (data[i].kind === 'file' && data[i].type.match('^image/')) {
          const f = data[i].getAsFile();
          console.log('File', f);
        }
      }
    };
    document.addEventListener('paste', pasteFn);
    return () => {
      document.removeEventListener('paste', pasteFn); // clean up
    };
  }, []);

Based on Can I use, Firefox only supports reading the clipboard in browser extensions.

This article's selected answer says that Firefox currently doesn't allow web pages to access the clipboard via JavaScript, so your only option would be to use the keyboard.

navigator.clipboard is an API that works only on secure environments. It could be just that you are running your React app on localhost, a non-secure env and it doesn't have access to the clipboard object from the browser.

You could have a check to see if navigator.clipboard is available on the environment and then use it.

if (navigator.clipboard !== undefined) {
  // make use of clipboard functions here
}

本文标签： reactjsHow to get the content from clipboard on Firefox in JavascriptStack Overflow