您的位置：首页 > Web前端 > JavaScript

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

2017-09-25 14:00 731 查看
之前做网页直接复制找了很多解决方案,一直没有找到一个好的,一般都需要使用外部的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
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航