开源项目
https://github.com/zenorocha/clipboard.js.
(拷贝文本到剪切板不应该复杂,它不应该需要许多步骤以及几百KB的文件,另外,它不应该依靠flash以及其他框架,这就是clipboard存在的原因)
使用clipboard简单快捷,并且从官网下载下来的zip格式压缩包里有非常实用的demo,举一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
</head>
<body>
<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
非常简单吧,我们只需下面四步:
1.引入clipboard.min.js文件
2.选择一个可以确定被拷贝元素的选择器,本例中使用用的是基本的标签选择器<div>,当然也可以使用id选择器 class选择器等等
3.定义一个button按钮,注意按钮的属性:
data-clipboard-action="copy" data-clipboard-target="div"
其中data-clipboard-target属性就是第二步你定义的选择器
4.书写js,建立clipboard对象以及复制后执行的方法
OK,这样功能就完成了,点击按钮后就会发现div的内容已经拷贝到剪切板了。