H5实现复制粘贴功能

H5就是移动端的web页面，现在可以说是非常的流行！今天就把我用H5实现复制粘贴功能分享出来给大家吧！

方案一 ： 可满足大部分浏览器正常使用！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>copy example</title>
</head>
<body>

<p>
  <button class="copy">Copy</button>
</p>
<p>
  <textarea cols="50" rows="10" placeholder="这这里粘贴试一下吧!"></textarea>
</p>

<script>

  var copyBtn = document.querySelector('.copy')

  // 点击的时候调用 copyTextToClipboard() 方法就好了.
  copyBtn.onclick = function() {
    copyTextToClipboard('随便复制点内容试试')
  }

  function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea")

    textArea.style.position = 'fixed'
    textArea.style.top = 0
    textArea.style.left = 0
    textArea.style.width = '2em'
    textArea.style.height = '2em'
    textArea.style.padding = 0
    textArea.style.border = 'none'
    textArea.style.outline = 'none'
    textArea.style.boxShadow = 'none'
    textArea.style.background = 'transparent'
    textArea.value = text

    document.body.appendChild(textArea)

    textArea.select()

    try {
      var msg = document.execCommand('copy') ? '成功' : '失败'
      alert('复制内容 ' + msg);
    } catch (err) {
      alert('不能使用这种方法复制内容');
    }

    document.body.removeChild(textArea)
}

</script>

  
</body>
</html>

方案二： 兼容苹果 iphone js 复制功能 clipboard.js

JS下载地址： https://github.com/zenorocha/clipboard.js

<script src="你的路径/clipboard.min.js"></script>

<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> 代码改变世界 </textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("复制成功");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>