本文介绍了JS与剪贴板相关的功能。
1.背景
事情的起因是使用阿里巴巴矢量图标库，使用页面大概长得是这样的
1.PNG
从图库里面选取适用的图标，下载资源文件放进项目中，然后就可以在项目中很方便的进行使用。
2.png
每次使用的时候都需要手动复制图标下方的类名，然后在项目中新建一个标签，并添加上类名。如果能直接把图标一点，就能把所需要的东西直接粘贴出来，就很方便。
2.Clipboard.js
在HTML5之前，网页上的复制功能还需要用到JS+Flash结合的方法。但是随着HTML5推出的一系列API，使得纯JS实现复制功能能够实现。比如这里提到的Clipboard.js。
新版的Clipboard.js使用起来很简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clipboard</title>
<script src="../../src/clipboard.js-master/dist/clipboard.min.js"></script>
</head>
<body>
<input id="foo" value="something to copy/cut">
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">按钮</button>
<script>
var clipboard = new Clipboard('.btn');
</script>
</body>
</html>
首先是选择一个需要点击的元素，可以是<button>或者是别的。
-
data-clipboard-action属性，属性值为copy或者cut，分别对应的是复制和剪切操作，只有当目标元素是<input>或者是<textarea>时，剪切操作才有效果；否则等同于复制操作。 -
data-clipboard-target属性，根据css选择器找到元素，当选择结果不唯一时，只会对选到的第一个元素生效。
或者可以不使用data-clipboard-target属性，而可以使用data-clipboard-text属性。
-
data-clipboard-text属性，使用该属性，能直接将属性值存入剪贴板。
属性添加完整后，在js中对复制按钮进行实例化。
var clipboard = new Clipboard('.btn');
参数可以是css选择器，或者dom节点。当选择器选中多个节点时，会对所有的节点生效，即点击各个节点时可以触发各自对应的复制剪切事件。
最后是插件的两个事件
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();//清除复制后文字的选中状态
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
3.实际应用
有了好用的插件之后，就可以对最开始的那个页面进行改进了。下载好文档以后，首先查看一下文档结构，每个图标的结构大致如下。
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont icon-cuowu"></i>
<div class="name" id="the-error">错误</div>
<div class="fontclass">.icon-cuowu</div>
</li>
<li>
<i class="icon iconfont icon-erweima"></i>
<div class="name">二维码</div>
<div class="fontclass">.icon-erweima</div>
</li>
...
</ul>
</div>
我们想要达成的效果是当点击二维码图标的时候，就会复制以下内容。
<i class="icon iconfont icon-erweima"></i>
然后做出了如下的js
$(function () {
var clipboard = new Clipboard('i.icon');
clipboard.on('success', function (e) {
console.log('复制成功');
});
var makePrepare = function () {
$('i.icon').each(function () {
var $this = $(this);
var theClass = $this.attr('class');
var text = '<i class="' + theClass + '"></i>';
$this.attr('data-clipboard-action', 'copy');
$this.attr('data-clipboard-text', text);
})
}
makePrepare();
})
最后，实现了想要的效果。点击一下想要的图标，就可以直接粘贴了。
网友评论