ZeroClipboard 不支持手机浏览器复制 H5页面的几种复制方式分享

来源：互联网发布：pace.js 在线演示编辑：程序博客网时间：2024/05/16 18:46

ZeroClipboard能很好的兼容各大主流的浏览器，实现复制功能，所以在PC端建议使用ZeroClipboard来达到这个功能。

但是ZeroClipboard是基于flash来实现复制的，所以在手机上无法使用，这里给大家分享2个方式，在手机上可以实现复制功能，但不能兼容所有的浏览器，比如手机版的QQ浏览器就不支持，其他浏览器暂未测试。

第一种：

优点：代码简单，容易理解。

缺点：能够支持复制的标签不多，比如将textarea标签换成p标签，div标签，span标签，等，就不支持了，input的value可以支持。其他暂未测试。反正不够灵活。

以下是完整代码演示：

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><title></title></head><body><input type="button" id="fuzhi" value="点击复制"/><br /><br /><textarea cols="42" rows="4" id="b"></textarea></body><script type="text/javascript">$(document).ready(function(){$("#fuzhi").click(function(){var Url2 = document.getElementById("b");Url2.select();document.execCommand("Copy");alert("已复制好，可贴粘。");});});</script></html>

第二种：

优点：能够兼容绝大部分的标签，想复制哪里就复制哪里。

缺点：代码多，不太容易理解

以下是完整版的代码演示：

<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>       <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>        <title>移动端复制到剪贴板！</title>    </head>    <body>    <p>    哈哈    <span id="target">        你没看错，就是复制的这里        </span>    </p>    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">        复制按钮    </button>       </body>    <script>        $(document).ready(function(){            var targetText=$("#target").text();            var clipboard = new Clipboard('#copy_btn');             clipboard.on('success', function(e) {                console.info('Action:', e.action);                console.info('Text:', e.text);                console.info('Trigger:', e.trigger);                alert("复制成功");                 e.clearSelection();            });        });    </script>    </html>

好了，以上就是在手机端建议使用的2中复制方式，如果你还有其他的方式，欢迎在下方评论区说出你的方法！3Q

阅读全文

0 0