[JS]如何用 Javascript 一鍵複製,網頁上指定的文字區塊到剪貼簿

使用 JS 來實現網頁上單鍵複製的功能
使用 JS 來實現網頁上單鍵複製的功能

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


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


這種按一下按鈕就完成複製的功能,其實在很多常用的網路服務中,都可以看到,像是在使用 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>

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


function CopyTextToClipboard(id) {
    var TextRange = document.createRange();
    TextRange.selectNode(document.getElementById(id));
    sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(TextRange);
    document.execCommand("copy");
    alert("複製完成!") //此行可加可不加
  }

單鍵複製程式碼

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


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


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


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


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


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


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


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


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