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

Question

我需要像在画布中一样将弹出窗口的内容复制到剪贴板中（它是Openlayer 4的东西，您需要在地图上添加一个叠加层，然后可以使用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 （您可以检查弹出窗口并在info_0中复制整个info_0），但是在现实生活行不通。

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

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

一旦投入生产，代码将通过webpack进行转换。

Answer 1

尝试以下操作：通过选择/复制文本之前添加contenteditable属性，使包含文本的元素可编辑。 您可以在执行复制命令后立即删除该属性。

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