js将文本复制到粘贴板

js将文本复制到粘贴板

在web开发中为了方便用户操作，我们时常会遇到需要一键复制的情况，一下两种方法是介绍js中操作剪切版的相关方法。

采用input标签实现

这里生成一个input标签，再将传入方法的文本值赋值给我们生成的input,再将我们input的值赋值到剪切版中。需要注意的是这种方法是不会保存文本中的换行信息的。

  // 复制的方法这个方法不能保存换行付
            function copyText(text, callback) { // text: 要复制的内容， callback: 回调
                var tag = document.createElement('input');
                tag.setAttribute('id', 'cp_hgz_input');
                tag.value = text;
                document.getElementsByTagName('body')[0].appendChild(tag);
                document.getElementById('cp_hgz_input').select();
                document.execCommand('copy');
                document.getElementById('cp_hgz_input').remove();
                if (callback) { callback(text) }
            }
            //调用方法
            copyText('123456', function () { console.log('复制成功') })

采用textarea实现

这里生成一个textarea标签，再将传入方法的文本值赋值给我们生成的textarea,再将我们textarea的值赋值到剪切版中。这种方式会保留文本中的换行符需要注意的是这种方式需要做机型适配， iOS 下会自动唤起键盘，所以需要做特定处理。

 function 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 属性
  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()
  }
  }