clipboard.js不需要jquery依赖,也不需要flash的支持,而另一个插件zClip需要依赖于flash,clipboard.js显得更加灵活。
引入clipboard.js
<script src = "https://libs.bsdev.cn/clipBoard.js/clipBoard.min.js"></script>
使用方法
var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
}
});
参数说明
beforeCopy:
复制前需要执行的动作copy:
复制内容afterCopy:
复制后需要执行的动作
演示代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>New Document</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src = "https://libs.bsdev.cn/clipBoard.js/clipBoard.min.js"></script>
</head>
<body>
<input type="text" id = "data" />
<button id = "btn" onclick = "return copy();">复制</button>
<script>
function copy() {
var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
alert('复制成功');
}
});
}
</script>
</body>
</html>
其它说明
clipBoard.js支持复制/剪切/粘贴等操作,更多介绍请参考项目地址:https://github.com/baixuexiyang/clipBoard.js