0

我需要将弹出窗口的内容复制到剪贴板中，就像在画布内一样（它是 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在 codepen 中复制整个内容）但在一个真实的生活行不通。

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

该copyEv函数在弹出窗口显示在地图上后调用，延迟 300 毫秒，以确保显示弹出窗口

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

4

1 回答 1

1

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

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

于 2019-01-21T15:30:52.793 回答