js实现复制功能

原创已于 2022-06-06 22:22:24 修改 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-06-06 22:13:53 首次发布

这段代码展示了一个在React中实现的复制功能。当用户点击‘复制’按钮时，JavaScript会选中并复制‘copyText’ID下的文本内容到剪贴板。如果复制成功，控制台会打印‘复制成功’。

copy = () => {
      let text = document.getElementById('copyText').innerHTML
      let input = document.createElement('input')
      input.setAttribute('id', 'copyInput')
      input.setAttribute('value', text)
      document.getElementsByTagName('body')[0].appendChild(input)
      document.getElementById('copyInput').select()
      if (document.execCommand('copy')) {
        console.log('复制成功')
        // 可以提示一个复制成功的弹窗
      }
      document.getElementById('copyInput').remove()
    }
// 下面是在react中的jsx部分
      <>
        <span id="copyText">12345600</span>
        <span onClick={() => copy()}>复制</span>
      </>