当前位置：网站首页>js 实现复制功能

js 实现复制功能

2022-08-01 00:24:00 【GMLGDJ】 

<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>

原网站

版权声明
本文为[GMLGDJ]所创，转载请带上原文链接，感谢
https://blog.csdn.net/GMLGDJ/article/details/126053689

边栏推荐

猜你喜欢

随机推荐