JavaScript 文字複製到剪貼簿功能

Dec 29, 2021

緣起

實作短網址產生器的一個小project，產生出的短網址只需要點一下copy按鈕就可以複製文字到剪貼簿。

先來看看成品demo~~

原本想使用的是document.execCommand(‘copy’)的方法但出現了一個已棄用(deprecated)的刪除線提示。

再搜尋「execCommand MDN」，出現以下訊息。

execCommand()對剪貼簿的權限是同步的(synchronous)，簡單說因為程式碼都是逐行執行，JavaScript 會等到execCommand()做完他所有的事後才會繼續，要知道剪貼簿很常出現一些敏感的資料如密碼。

替代方案就是 Async Clipboard API 。以下直接簡單實作

用navigator.clipboard取得剪貼簿的權限，使用writeText 的功能寫入剪貼簿。(補充: 如果想讀取目前剪貼簿的內容使用readText)。

JS的發展沿革日新月異，在網路上查找資料的時候，發現有些明明距離也才2~3年的文章，到現在可能都會被新的技術替代掉，我覺得抱持著開放的心態學習並有時候停下來思考，能走得更遠。