如何使用jquery一键复制到剪切板
如何使用jquery一键复制到剪切板
繁星点点滴滴浏览 2179回答 1
1回答
-
收到一只叮咚
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文件即可使用，简单方便
随时随地看视频慕课网APP
相关分类
JQuery