网页复制,使用clipboard.js复制任意内容到粘贴板.不需要通过flash

之前做网页直接复制找了很多解决方案,一直没有找到一个好的,一般都需要使用外部的flash来解决,上次是看到人家的一个推广页在微信里面,让我点击复制,我就点击复制了,居然复制成功了,然后就研究了一下人家的源码,把复制的js拿出来了然后配合百度谷歌写了一个简单的demo

如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="apple-themes-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no">
    <script src="/content/js/jquery-1.8.2.min.js"></script>
    <script src="/content/js/clipboard.js"></script><!--复制的js-->

    <script>
        $(function () {
            try {
                var clipboard = new Clipboard('.table_td', {
                    text: function (e) {
//这里的e就是 table_td这个元素
 if ($(e).index() == 0 || $(e).index() == 1) {
                            return $(e).text();
                        }
                    }
                });
//成功回调方法
 clipboard.on('success', function (e) {
                    
                    $("body").append("复制成功");
                });

//失败回调方法

clipboard.on('error', function (e) { $("body").append("复制失败"); }); } catch (e) { $("body").append("错误" + e.message); } }); </script></head><body> <div class="table_td" style="font-size:40px;"> 点击复制 </div> <div> </div></body></html>

卧槽了 js怎么上传？代码片段？

这是js里面的官网 https://zenorocha.github.io/clipboard.js
如果没有的话自己去百度吧肯定能找到的

20171009补充,
手机端点击复制不管用,后面将div改成了button就好使了, 也不知道原理是什么,反正就先这样吧

网页复制,使用clipboard.js复制任意内容到粘贴板.不需要通过flash

猜你喜欢