js 实现复制功能

最新推荐文章于 2024-09-26 14:44:31 发布

GMLGDJ

最新推荐文章于 2024-09-26 14:44:31 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/GMLGDJ/article/details/126053689

版权

JavaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<body>
  <button>复制</button>
  <script>
    const copy = (value, cb) => {
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性  
      // 网上有些例子是赋值给innerText,这样也会赋值成功，但是识别不了\r\n的换行符，赋值给value属性就可以
      textarea.value = value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      textarea.setSelectionRange(0, textarea.value.length)
      document.execCommand('Copy')
      document.body.removeChild(textarea)
      if (cb && Object.prototype.toString.call(cb) === '[object Function]') {
        cb()
      }
    }
    const btn = document.getElementsByTagName('button')[0];
    btn.addEventListener('click', (e) => {
      console.log(e);
      copy(123, () => {
        console.log('复制成功');
      })
    })
  </script>
</body>