ZeroClipboard

自从用了 Github 开始,一直都觉得它里头複製网址的方法做得很好,只需要点一个按钮就可以複製 ( 也有可能因为文字栏位太短才用这种方式 ),仔细看了一下它怎么写的,发现上面用 div 迭了一层 flash 的 swf ,百般不思其解的状态下找了一些资料,发现原来不能用纯 javascript 的方法来做是因为浏览器的安全性限制,不能够单纯用前端存取剪贴簿的资料,所以才会用 flash 作为介接。

点选自动複製 ( ZeroClipboard )

再仔细看看 Github 用了甚么套件,发现它是使用一套名为「ZeroClipboard」的纯 javascript 插件,主要是在需要点选自动複製的按钮上方,覆盖了一层 flash 的 swf,藉由点击这个 flash 的事件,完成剪贴簿的複製和贴上,实际的运作原理我们就一一看下去。

点选自动複製 ( ZeroClipboard )

先列出 ZeroClipboard 的 官方网站 和 Github,内容其实有不少的 API 可以供大家使用,这裡就不一一赘述,只把基本常用的功能列出,相信对于单纯需要「自动複製贴上」的情境,应该就已经绰绰有馀。( 换句话说现在除了 Github,真的很少见到有人这样用呀,毕竟手机上不支援 flash 是一大隐忧 )

要实作之前,有一个前置作业要做,就是电脑上必须要有安装 IIS 或 Apache 的 http 伺服器,同时藉由伺服器来浏览 ( 当然在这边点选范例就不用,因为已经是网页伺服器的环境 ),如果没有透过伺服器浏览网页,flash 的作用将会失效,至于要如何安装呢?建议可以下载 MAMP ( http://www.mamp.info/en/ ) 这套在 Mac 与 Windows 都相当好用的一键架站软体,下载免费版的就很好用囉!

点选自动複製 ( ZeroClipboard )

有了 http 的伺服器环境之后,接着就是要去 ZeroClipboard 的 Github 把整包给下载下来,里头有两个档桉最为重要,一个是 ZeroClipboard.js,另一个就是 ZeroClipboard.swf,ZeroClipboard.js 是在一开始引入的 js,ZeroClipboard.swf 则是要和「和 ZeroClipboard.js 放在同一个目录」的 swf 档,当然也不一定要在同一个目录下,只需要去修改 ZeroClipboard.js 里头的swfPath即可,这在后续会介绍。

点选自动複製 ( ZeroClipboard )

再来就是介绍如何使用,当我们引入 jquery 和 ZeroClipboard.js 之后,要先宣告一个 ZeroClipboard 物件,如此一来才能使用它的 API。( 参考 ZeroClipboard 说明文件 )

HTML:

<button class="clipboard" data-clipboard-text="12345">点我複製</button>
<textarea></textarea>

JS:

$(function(){
    var client = new ZeroClipboard($(".clipboard"));
    });

上面的 HTML 我多放了一个 textarea,目的就是複製之后可以直接贴上,大家可以点选这个范例: zeroclipboard-demo1.html,实际感受一下複製贴上,同时也可以在按钮上面按右键,就会发现它上面多了一层 flash。

点选自动複製 ( ZeroClipboard )

箇中原理其实就在于这段:data-clipboard-text="12345",我们把要複製到剪贴簿的文字写在裡面,点选之后就会把这段字複製起来,不过,总是不能所有东西都写在里头,还是必须有写在外面的时候,这时就必须用到 data-clipboard-target,裡面放上要複製区域的 id,就可以进行複製。( 范例: zeroclipboard-demo2.html )

HTML:

输入要複製的内容:
<br/>
<textarea id="text"></textarea>
<br/>
<br/>
<button class="clipboard" data-clipboard-target="text">点我複製</button>
<br/>
<br/>
贴上测试:
<br/>
<textarea id="text"></textarea>

点选自动複製 ( ZeroClipboard )

以上就是非常简单就可以使用 ZeroClipboard.js 的作法,当然如果你 CSS 够强,其实也可以利用 伪元素 做出对话框的效果囉!( 范例: zeroclipboard-demo3.html )

HTML:

<button class="clipboard" data-clipboard-text="12345" data-hover="複製:12345" data-copied="複製完成!">点我複製</button>
<br/>
<br/>
<br/> 贴上测试:
<br/>
<textarea id="text"></textarea>

CSS:

.ho {
  position: relative;
}
.ho::before {
  content: attr(data-hover);  /*读取 HTML5 的 data-attribute*/
  position: absolute;
  top: 26px;
  width:60px;
  padding: 5px 10px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  box-shadow: rgba(0, 0, 0, .4) 2px 2px 5px;
}
.ho::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 10px;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 6px solid rgba(0, 0, 0, .5);
  border-left: 6px solid rgba(0, 0, 0, 0);
}
.ho.copied::before{
  content: attr(data-copied);   /*读取 HTML5 的 data-attribute*/
}

JS:

$(function() {
  var client = new ZeroClipboard($(".clipboard"));

  $('.clipboard').hover(function() {
    $(this).addClass('ho');
  }, function() {
    $(this).removeClass('ho').removeClass('copied');
  });

  client.on('aftercopy', function(event) {  //套用 aftercopy 的 api
    $('.clipboard').addClass('copied');
  });
});

点选自动複製 ( ZeroClipboard )

上面个范例的做法,有用到一些 HTML5 与 CSS 的小技巧,就是利用 CSS 伪元素的content的属性,自动读取 HTML5 里头的 data-attribute,就可以做到在不用撰写 JS 的情形下,自动把 HTML5 的内容带入 CSS 里头呈现。当然最后写的 JS 只是在点击上做了点小小的判断而已,相信大家如果熟练,就可以很简单的做出「点选自动複製」的按钮囉!

最后,忘记刚刚说要补充 swfPath要从哪裡修改,以我的 blog 为例,打开 ZeroClipboard.js,搜寻「swfPath」,可以看到这一段,从这段就可以修改 swfPath 囉!如果没有修改的话,记得要将 swf 的档桉和 ZeroClipboard.js 放在同一个目录,就可以正确运作。

  var _globalConfig = {
    swfPath: _getDefaultSwfPath(),
    trustedDomains: window.location.host ? [ window.location.host ] : [],
    cacheBust: true,
    forceEnhancedClipboard: false,
    flashLoadTimeout: 3e4,
    autoActivate: true,
    bubbleEvents: true,
    containerId: "global-zeroclipboard-html-bridge",
    containerClass: "global-zeroclipboard-container",
    swfObjectId: "global-zeroclipboard-flash-bridge",
    hoverClass: "zeroclipboard-is-hover",
    activeClass: "zeroclipboard-is-active",
    forceHandCursor: false,
    title: null,
    zIndex: 999999999
  };

以上,就是自动点选複製按钮的做法,虽然用到的机会不多,但多一个小步骤,可以让使用者省掉全选複製的手续,也是个不错的使用者体验。