码迷,mamicode.com
首页 > 其他好文 > 详细

【H5】使用h5实现复制粘贴功能

时间:2018-07-01 11:41:29      阅读:492      评论:0      收藏:0      [点我收藏+]

标签:boa   iphone   inf   article   script   lin   select   ali   api   

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

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

 

  下载地址: 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>

 

【H5】使用h5实现复制粘贴功能

标签:boa   iphone   inf   article   script   lin   select   ali   api   

原文地址:https://www.cnblogs.com/richerdyoung/p/9249476.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!