本文介紹了JS與剪貼板相關(guān)的功能惩坑。
1.背景
事情的起因是使用阿里巴巴矢量圖標(biāo)庫(kù)，使用頁(yè)面大概長(zhǎng)得是這樣的
從圖庫(kù)里面選取適用的圖標(biāo)也拜，下載資源文件放進(jìn)項(xiàng)目中以舒，然后就可以在項(xiàng)目中很方便的進(jìn)行使用。
每次使用的時(shí)候都需要手動(dòng)復(fù)制圖標(biāo)下方的類(lèi)名慢哈，然后在項(xiàng)目中新建一個(gè)標(biāo)簽蔓钟，并添加上類(lèi)名。如果能直接把圖標(biāo)一點(diǎn)卵贱，就能把所需要的東西直接粘貼出來(lái)滥沫，就很方便侣集。
2.Clipboard.js
在HTML5之前，網(wǎng)頁(yè)上的復(fù)制功能還需要用到JS+Flash結(jié)合的方法兰绣。但是隨著HTML5推出的一系列API世分，使得純JS實(shí)現(xiàn)復(fù)制功能能夠?qū)崿F(xiàn)。比如這里提到的Clipboard.js缀辩。
新版的Clipboard.js使用起來(lái)很簡(jiǎn)單臭埋。
<!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>
首先是選擇一個(gè)需要點(diǎn)擊的元素，可以是<button>或者是別的臀玄。
-
data-clipboard-action屬性斋泄，屬性值為copy或者cut，分別對(duì)應(yīng)的是復(fù)制和剪切操作镐牺，只有當(dāng)目標(biāo)元素是<input>或者是<textarea>時(shí)炫掐，剪切操作才有效果；否則等同于復(fù)制操作睬涧。 -
data-clipboard-target屬性募胃，根據(jù)css選擇器找到元素，當(dāng)選擇結(jié)果不唯一時(shí)畦浓，只會(huì)對(duì)選到的第一個(gè)元素生效痹束。
或者可以不使用data-clipboard-target屬性，而可以使用data-clipboard-text屬性讶请。
-
data-clipboard-text屬性祷嘶，使用該屬性，能直接將屬性值存入剪貼板夺溢。
屬性添加完整后论巍，在js中對(duì)復(fù)制按鈕進(jìn)行實(shí)例化。
var clipboard = new Clipboard('.btn');
參數(shù)可以是css選擇器风响，或者dom節(jié)點(diǎn)嘉汰。當(dāng)選擇器選中多個(gè)節(jié)點(diǎn)時(shí)，會(huì)對(duì)所有的節(jié)點(diǎn)生效状勤，即點(diǎn)擊各個(gè)節(jié)點(diǎn)時(shí)可以觸發(fā)各自對(duì)應(yīng)的復(fù)制剪切事件鞋怀。
最后是插件的兩個(gè)事件
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();//清除復(fù)制后文字的選中狀態(tài)
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
3.實(shí)際應(yīng)用
有了好用的插件之后，就可以對(duì)最開(kāi)始的那個(gè)頁(yè)面進(jìn)行改進(jìn)了持搜。下載好文檔以后密似，首先查看一下文檔結(jié)構(gòu)，每個(gè)圖標(biāo)的結(jié)構(gòu)大致如下葫盼。
<div class="main markdown">
<h1>IconFont 圖標(biāo)</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont icon-cuowu"></i>
<div class="name" id="the-error">錯(cuò)誤</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>
我們想要達(dá)成的效果是當(dāng)點(diǎn)擊二維碼圖標(biāo)的時(shí)候残腌，就會(huì)復(fù)制以下內(nèi)容。
<i class="icon iconfont icon-erweima"></i>
然后做出了如下的js
$(function () {
var clipboard = new Clipboard('i.icon');
clipboard.on('success', function (e) {
console.log('復(fù)制成功');
});
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();
})
最后，實(shí)現(xiàn)了想要的效果废累。點(diǎn)擊一下想要的圖標(biāo)邓梅，就可以直接粘貼了。
