web上的複製

你可能曾經嘗試過複製網頁上的一些文字，獲得的倒是使人沮喪的的結果。這篇文章介紹相關的內容。

不是真正的文字

這多是最多見的問題，不少人嘗試對一張帶有文字的圖片進行像文字那樣的選擇，複製固然不行了。

重疊層遮擋

你應該也見過文章底部有那種淡出的效果，一般的作法是將一張漸變的圖片置於文字的上方，因此你能夠看到圖片下方的內容，可是你選不了那些文字。

https://dn-w3ctrain.qbox.me/overlaptext.gif

 

在這個Demo中，咱們使用僞元素和漸變圖片來實現這種效果。慶幸的是，在大多數狀況下，咱們能夠設置pointer-events:none屬性來讓上面的漸變圖片不接受鼠標交互事件，因而點擊事件就能去到文字內容部分了。

注：然而IE10不支持這個屬性

彈出小工具

一些網站在你選完文字之後，作了一些有趣的行爲。好比彈出一些驚歎號，一下小工具之類的。固然並非全部人都喜歡。

https://dn-w3ctrain.qbox.me/popup-medium.png

 

Highlighter.js這個插件能夠幫你很容易實現。

你也能夠看看stackoverflow上的作法。

CSS控制能否選擇

有一個CSS屬性能夠控制文字能否被選中 user-select。

1 2 3 4 5 6

.unselectable { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ }

在移動設備上，可能大部分時候是經過長按來選擇文字內容，你能夠經過callout來阻止。

1 2	-webkit-touch-callout: default /* displays the callout */ -webkit-touch-callout: none /* disables the callout */

其餘看得見，可是你選不了的方式

下面形式生成的文字，你也選不了：

• 默認的計數器 好比有序列表
  標籤前綴的1. 2. 3.
• 自定義計數器
• 僞元素文字

好比：

1 2 3

div::after { content: "hi"; }

 

1 2 3 4

<div> <!-- Rest of stuff inside the div --> hi </div>

上面代碼會出現兩個」hi」可是你只能選中一個。

沒法複製代碼行數

咱們在一些技術博客常常看到一些牛逼的代碼，複製下來後發現，前面的行數並無複製下來。（這是正確的作法），可能緣由就是上面的某一種。

自動選中所有

表單元素常用這個，若是你想讓文字能夠像人們熟悉的可選擇方式(ctl + A之類的)，那麼就使用input 或者 textarea來承載。

1	<textarea id="ta">a bunch of text</textarea>

1 2 3

var ta = document.getElementById("ta"); ta.focus(); ta.select();

若是你想操做是當選中文本的一部分的時候，整個元素都被你選中，那麼你能夠用下面的代碼：

1 2 3 4 5 6

$( '#ta').on("focus", function(e) { e.target.select(); $(e.target).one( 'mouseup', function(e) { e.preventDefault(); }); });

監聽mouseup並preventDefault是爲了阻止鼠標事件改變了選擇內容。

js將內容複製到剪切板

你可使用javascriptdocument.execCommand('copy');，複製選中代碼

1 2	<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p> <p><button class="js-emailcopybtn">Copy</button></p>

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var copyEmailBtn = document.querySelector('.js-emailcopybtn'); copyEmailBtn.addEventListener( 'click', function(event) { // Select the email link anchor text var emailLink = document.querySelector('.js-emaillink'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range);   try { // Now that we've selected the anchor text, execute the copy command var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg); } catch(err) { console.log('Oops, unable to copy'); }   // Remove the selections - NOTE: Should use // removeRange(range) when it is supported window.getSelection().removeAllRanges(); });

不過如今這部分代碼兼容性不強。咱們一般見到的是使用ZeroClipboard這個庫來實現的。看看相關教程

如何去掉樣式的複製

當你複製文字的時候，常常會連着樣式一塊兒複製下來。

https://dn-w3ctrain.qbox.me/copy-style.gif

 

mac系統有一種Past and Match Style的方式，它能很是有效的去掉你複製內容的樣式。你能夠設置快捷鍵Command-Shift-V。

https://dn-w3ctrain.qbox.me/copy-style-no.gif

https://dn-w3ctrain.qbox.me/20130817_tip_pastematchstyle_shortcut-screenshot.png

 

使用a標籤會讓內容難以複製

在HTML5中，咱們可使用a標籤包裹任何咱們想包裹的內容。

1 2 3 4 5

<a href="#0"> <h3> Title </h3> </a>

 

這會讓a標籤裏面的內容難以被複制。若是換成

1 2 3

h3 > a { display:block; }

 

那麼複製會變得稍微簡單一下，然而若是你習慣從右到左選中的話，一樣會讓你抓狂的。

 

See the Pen Block titles kinda hard to copy by Chris Coyier (@chriscoyier) on CodePen.