Clipboard.readText() support issue on firefox

312 阅读1分钟

developer.mozilla.org/en-US/docs/…

image.png

修改配置项,才能生效

image.png

image.png

改用第三方库

windowsreport.com/browser-doe…

使用clipboradData

image.png

相关文档查阅

on Chrome

image.png

image.png

on firefox version 54+

image.png

image.png developer.mozilla.org/en-US/docs/…

image.png

execCommand ,废弃

image.png

升级浏览器版本到54+ ,同时添加属性,contenteditable=true still not work

<blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
</blockquote>

<cite contenteditable="true">-- Write your own name here</cite>


permission

developer.mozilla.org/en-US/docs/…

image.png

request permission still not work for not support for website ,seems only extension support

developer.mozilla.org/en-US/docs/…

navigator.permissions.query({name: "clipboard-write"}).then((result) => {
  if (result.state === "granted" || result.state === "prompt") {
    /* write to the clipboard now */
  }
});

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(() => {
    /* clipboard successfully set */
  }, () => {
    /* clipboard write failed */
  });
}

developer.mozilla.org/en-US/docs/…

support PermissionName

developer.mozilla.org/en-US/docs/…

chrome PermissionName

| -------------- | --------------------------- |
|                |"geolocation",               |             
|                | "notifications",            |
|                | "push",                     |
|                | "midi",                     |
|                | "camera",                   |
|                | "microphone",               |
|                | // "speaker",               |
|                | // "device-info",           |
|                | "background-fetch",         |
|                | "background-sync",          |
|                | // "bluetooth",             |
|                | "persistent-storage",       |
|                | "ambient-light-sensor",     |
|                | "accelerometer",            |
|                | "gyroscope",                |
|                | "magnetometer",             |
|                | // "clipboard",             |
|                | "screen-wake-lock",         |
|                | "nfc",                      |
|                | "display-capture",          |
|                |                             |
|                | // Non-standard:            |
|                | "accessibility-events",     |
|                | "clipboard-read",           |
|                | "clipboard-write",          |
|                | "payment-handler",          |
|                | "idle-detection",           |
|                | "periodic-background-sync", |
|                | "system-wake-lock",         |
|                | "storage-access",           |
|                | "window-placement",         |
|                | "local-fonts",

firefox PermissionName

`"geolocation",`

`"notifications",`

`"push",`

`"persistent-storage"`

`// Unsupported: "midi"`

webkit PermissionName

| --------------------- | -------------------------------------------------------------------------- |
|                       | // FIXME: update the list to match spec when new features are implemented. |
|                       | "accelerometer",                                                           |
|                       | "background-fetch",                                                        |
|                       | "bluetooth",                                                               |
|                       | "camera",                                                                  |
|                       | "display-capture",                                                         |
|                       | "geolocation",                                                             |
|                       | "gyroscope",                                                               |
|                       | "magnetometer",                                                            |
|                       | "microphone",                                                              |
|                       | "midi",                                                                    |
|                       | "nfc",                                                                     |
|                       | "notifications",                                                           |
|                       | "screen-wake-lock",                                                        |
|                       | "speaker-selection"                                                        |
|                       | };

final code not work

const destinationImage = document.querySelector('#destination')
destinationImage.addEventListener('click', pasteImage);

async function pasteImage() {
  try {
    // would be error when compile with ts for name PermissionName issue 
    if(navigator.permissions){
      const permission = await navigator.permissions.query({ name: 'clipboard-read' });
      if (permission.state === 'denied') {
       throw new Error('Not allowed to read clipboard.');
      }
    }
    
    // just work when config change although the clipboard support but not call by browser
    const clipboardContents = await navigator.clipboard.read();
    for (const item of clipboardContents) {
      if (!item.types.includes('image/png')) {
        throw new Error('Clipboard contains non-image data.');
      }
      const blob = await item.getType('image/png');
      destinationImage.src = URL.createObjectURL(blob);
    }
  }
  catch (error) {
    console.error(error.message);
  }
}

参考

Permissions

ReadText

not work

ReadText not support

Permission