在開發網頁的時候，不管是前端還是後台，都有可能會設計一些讓使用者直接複製貼上的需求。
好比說，我們在註冊會員之後，網頁上顯示了會員編號，或是認證碼，讓網友直接複製，又可能是訂單編號，在教學頁面中，更是很常用到讓使用者直接複製頁面上的示範原始碼。

那麼，如果在這種情況下，安排一個可以一鍵就完成複製的按鈕，那就更貼心更方便了。

這種按一下按鈕就完成複製的功能，其實在很多常用的網路服務中，都可以看到，像是在使用 Google Maps 的時候，他的地址欄旁邊，就有一個按鈕可以讓大家一按，就可以把這段地址複製到剪貼簿。
Google 翻譯也有，點一下就可以把翻譯結果 Copy 起來。
我們查閱 fontAwesome 的字型圖示時，她們也有提供一個按鍵，方便大家直接複製字元碼或是樣式名稱(Class Name)等。

雖然這個功能也不過就是讓大家少按一個滑鼠右鍵而已，但是網頁上有了這種『一鍵複製』的功能，就是感覺很酷 :)

可是這個很酷又方便的功能要怎麼做呢？
接下來，
我們就來跟大家分享，如何使用 Javascript 來製作一鍵複製到剪貼簿的功能。

如何用 Javascript 來實現單鍵複製的功能

要在網頁上實現這個便利的功能，沒錯，我們就是要採用 Javascript 來完成了。

不過整個 JS 的程式碼還算蠻簡單的，就短短幾行而已，大家可以直接複製了貼在網頁的檔頭(Header)就行了。

我們來看一下這段程式碼是怎麼寫的：

function CopyTextToClipboard(id) {

    var TextRange = document.createRange();

    TextRange.selectNode(document.getElementById(id));

    sel = window.getSelection();

       sel.removeAllRanges();

       sel.addRange(TextRange);

    document.execCommand("copy");

    alert("複製完成！")  //此行可加可不加

}

我們就以這段程式碼來當作複製的範例，在 JS 程式碼的下方，加上一個複製功能鍵，方便大家複製。
網頁上的原始碼，我們就寫成下面這樣：

<div id="copythis">function CopyTextToClipboard(id) {

    var TextRange = document.createRange();

    TextRange.selectNode(document.getElementById(id));

    sel = window.getSelection();

       sel.removeAllRanges();

       sel.addRange(TextRange);

    document.execCommand("copy");

    alert("複製完成！")   //此行可加可不加

}</div>

<a href="javascript:void(0)" onclick="CopyTextToClipboard('copythis')">

<i class="fas fa-clipboard"></i> 單鍵複製程式碼

</a>

顯示出來的結果，就是下面這個樣子，大家可以直接點按那個剪貼簿的按鈕，就可以測試這個功能是不是正確無誤的複製到你的剪貼簿了呢？

單鍵複製到剪貼簿的使用時機與定義

首先我們先來定義一下，這個單鍵複製的功能，通常都是在什麼樣的情況下來執行的？

舉例來說，是使用者選取了一段文字，然後按下按鍵來複製呢？
還是網頁上有特定的文字區塊，在這個區塊旁邊設計了這個單鍵複製按鈕，方便大家按一下就完成 Copy？

另外，使用這個功能的目的是什麼？比較酷？還是有真的必要的意義存在呢？

一般來講，
這種一鍵完成複製的功能多半是針對特定的區塊來設計的，像是我們這次的範例，或是像 Google 地圖、Google 翻譯、FontAwesome 官網，都是屬於這種，不需要使用者選取，直接複製特定的文字區塊。

為什麼呢？
這個程式存在的用意當然不是為了酷囉。
而是避免使用者選取時，遺漏了部分文字資訊。

特別是像我們的範例那樣，有如外星文字的程式碼，如果少選取到一個分號，就可能完全不能使用。
有好比，如果網頁上顯示的資訊不完全，像是寬度不夠，部分字串被隱藏到捲軸之外，那麼也會有可能造成使用者選取不正確。

所以這個功能實際上，是為了確保使用者一定可以完全複製所有的資訊，只是『順便』的感覺更方便以及特別酷這樣，優先順序可不要混淆囉 ^^

好了，如果有需要的朋友們，可以開始動手複製貼上了。