javascript 将 div 的内容从 Canvas 复制到剪贴板在 Firefox 上不起作用

Question

我需要将弹出窗口的内容复制到剪贴板中，就像在 Canvas 中一样(它是 Openlayer 4 的东西，您向 map 添加一个覆盖层，然后您可以使用 div 将其解析为创建后的内容)并且无法直接访问。

要显示弹出窗口，您需要单击街道限制。

这里是项目:

https://www.traffwebdev.uk/parking/test.html

此代码适用于 Chrome、Internet Explorer 和 Edge，但不适用于 Firefox。

这是我用来将内容复制到剪贴板的代码:

      const copyEv = () => {
        let max = ''
        if ($('#numofdivs').length > 0) {
          max = $('#numofdivs').val()
        }
        else {
          max = $('#popup-content').children().length
        }

        for (let i = 0; i < max; i++) {
          document.getElementById(`Copy_Btn_${i}`).addEventListener('click', () => {
            // We will need a range object and a selection.
            let contentHolder = document.getElementById(`info_${i}`)
            let range = document.createRange()
            let selection = window.getSelection()

            // Clear selection from any previous data.
            selection.removeAllRanges()

            // Make the range select the entire content of the contentHolder paragraph.
            range.selectNodeContents(contentHolder)

            // Add that range to the selection.
            selection.addRange(range)

            // Copy the selection to clipboard.
            document.execCommand('copy')

            // Clear selection if you want to.
            selection.removeAllRanges()
          })
        }
      }

我找到了一种不同的方法，但都不起作用，在 codepen 中正在工作，如果我修改文本以复制弹出窗口的内容，也可以工作(您可以检查弹出窗口并复制整个 info_0 在代码笔中)但在现实生活中不起作用。

https://codepen.io/chriscoyier/pen/OXAwvq

在 map 上显示弹出窗口后调用copyEv函数，延迟300ms以确保弹出窗口显示

一旦投入生产，代码就会使用 webpack 进行转换。

Answer 1

试试这个:在选择/复制文本之前添加 contenteditable 属性，使包含文本的元素可编辑。您可以在执行复制命令后立即删除该属性。

Firefox 对于从 DOM 中不可编辑内容的元素中选择内容非常挑剔。