iT邦幫忙

2018 iT 邦幫忙鐵人賽
7
Modern Web

重新認識 JavaScript系列 第 31

重新認識 JavaScript 番外篇 (1) - 實用小技巧 copy 事件

重新認識 JavaScript 的三十篇文章雖然已經結束了,但因為三十天來已經寫習慣,沒寫點什麼覺得手癢,所以在鐵人賽結束之前,偶爾會出現番外篇 (意思就是不會每天寫) 來介紹一些實戰中的小技巧或是比較輕鬆一些的內容。 不過番外篇的篇幅不會太長就是了。

今天想要來介紹的是許多內容型網站都會用到的「複製網站文字再貼上時,會自動在剪貼簿上加上說明文字」的技巧。

在系列文 重新認識 JavaScript: Day 14 事件機制的原理 的時候我們曾經介紹過「事件」的觀念。

今天要介紹的是,當我們要複製網頁上文字的時候,觸發的就是 copy 事件。

所以簡單來說,如果我們今天不希望別人來複製我們網頁上的內容時,就可以透過 copy 事件加上 preventDefault 來做到這樣的效果:

document.addEventListener('copy', function(e) {
  e.preventDefault();
}, false);

因為事件的預設行為被擋下來了,所以就算按了複製,剪貼簿裡也什麼都沒有。
但這樣做顯然不太厚道。

所以我們可以改用加入「善意的提示文字」來做:

document.addEventListener('copy', function(e) {
  e.preventDefault();
  var msg = " 「抄襲者是烏龜王八蛋」";

  e.clipboardData.setData("text/plain", window.getSelection() + msg);
}, false);

像這樣在觸發 copy 事件時,透過 window.getSelection() 來取得我們選取的文字,然後透過 e.clipboardData.setData 來設定剪貼簿,並且加上我們想要附註在後面的文字就可以囉!


謎之聲:「這個提示文字哪裡有善意了」


上一篇
重新認識 JavaScript: Day 30 JavaScript 的現在與未來
下一篇
重新認識 JavaScript 番外篇 (2) - 你所不知道的 pushState
系列文
重新認識 JavaScript37

1 則留言

0
konekoya
iT邦新手 5 級 ‧ 2018-01-04 08:58:28

我也覺得有點手癢XXD

我要留言

立即登入留言