复制粘贴之插件(clipboard.min.js)不需要安装flash
发布时间: 2018-11-06      作者:admin    浏览:293 次
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="xxx/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="xxx/clipboard.min.js"></script>
</head>
<body>

<input id="t" type="text"/>数据输出测试<br>

<!--测试1-->
<!--button按钮测试,需要复制的值放在属性  data-clipboard-text中<br>-->
<button class="btn" data-clipboard-text="测试1xxxxxxxxxxxx">点击测试1</button><br><br>

<!--测试2-->
<!--a按钮测试,需要复制的值放在属性 data-clipboard-text中<br>-->
<a class="a" data-clipboard-text="测试2">点击测试2</a><br><br>

<!--测试3-->
<!--测试,通过按钮的data-clipboard-target属性获取指定标签中的值-->
<div>测试3xxxxx</div>
 <button class="btn2" data-clipboard-action="copy" data-clipboard-target="div">点击测试3</button><br><br>

 <!--测试4-->
 <!--测试,通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->
 <textarea id="t2" style="color:#ff0000;"></textarea><br>
 <button class="btn3" data-clipboard-action="copy" data-clipboard-target="#t2">点击测试4</button>

<br><br>
<input type="text" class="infoPath" value="要复制的文本"/>
<input type="text" class="infoPath" value="ycjxxx"/>
<a href="javascript:;" id="copy">复制</a>
</body>
</html>
<script type="text/javascript">
<!--测试1-->
$(document).ready(function(){  
   var clipboard = new Clipboard('.btn'); 
   clipboard.on('success', function(e) {
       console.log(e);
        alert("测试1复制成功!")
        });
   clipboard.on('error', function(e) {
               console.log(e);
               alert("测试1复制失败!请手动复制")
         });
})
<!--测试2-->
$(document).ready(function(){  
   var clipboard1 = new Clipboard('.a'); 
   clipboard1.on('success', function(e) {
       console.log(e);
        alert("测试2复制成功!")
        });
   clipboard1.on('error', function(e) {
               console.log(e);
               alert("测试2复制失败!请手动复制")
         });
})
<!--测试3-->
$(document).ready(function(){  
   var clipboard2 = new Clipboard('.btn2'); 
   clipboard2.on('success', function(e) {
       console.log(e);
        alert("测试3复制成功!")
        });
   clipboard2.on('error', function(e) {
               console.log(e);
               alert("测试3复制失败!请手动复制")
         });
})
<!--测试4-->
$(document).ready(function(){  
   var clipboard3 = new Clipboard('.btn3'); 
   clipboard3.on('success', function(e) {
       console.log(e);
        alert("测试4复制成功!")
        });
   clipboard3.on('error', function(e) {
               console.log(e);
               alert("测试4复制失败!请手动复制")
         });
})


$(document).ready(function(){  //dom加载完成后执行方法
    $("#copy").on('click',function(){  //获取ID为copy元素的点击事件
        var e=$(".infoPath");//对象是content
        e.select(); //选择对象
        document.execCommand("Copy"); //执行浏览器复制命令
		alert(document.execCommand("Copy"))
        alert("复制成功");
    });
});

</script>
分享到:

朋友圈

新浪微博

QQ空间

豆瓣网

QQ好友