如何使用jquery一键复制到剪切板
1 回答
收到一只叮咚
TA贡献1821条经验 获得超4个赞
html部分
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<input id="t" type="text"/>数据输出测试
<textarea id="t2"></textarea>
<!--测试1-->
<!--button按钮测试，需要复制的值放在属性 data-clipboard-text中-->
<button class="btn" data-clipboard-text="测试1">点击测试1</button>
<!--测试2-->
<!--a按钮测试，需要复制的值放在属性 data-clipboard-text中-->
<a class="a" data-clipboard-text="测试2">点击测试2</a>
<!--测试3-->
<!--测试，通过按钮的data-clipboard-target属性获取指定标签中的值-->
<div>测试3</div>
<button class="btn2" data-clipboard-action="copy" data-clipboard-target="div">点击测试3</button>
<!--测试4-->
<!--测试，通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->
<button class="btn3" data-clipboard-action="copy" data-clipboard-target="#t2">点击测试4</button>
</body>
</html>
jquery部分
<!--测试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复制失败！请手动复制")
});
})
注：此方法主要使用了clipboard，无需通过其他文件，引入一个clipboard.js文件即可使用，简单方便
- 1 回答
- 0 关注
- 2178 浏览
添加回答
举报
0/150
提交
取消