---
# System prepended metadata

title: javascript實現複製到剪貼簿的功能
tags: [javascript]

---

<h1>javascript實現複製到剪貼簿的功能</h1>

<h2>狀況與想法</h2>

<p>在製作完短網址產生器的功能後，要加入挑戰的copy功能，原本想說如果真的完完全全使用自己的想法，不知做不做的出來。</p>

<h2>一開始的構想</h2>

<p>一開始直覺性的想到，可能要監聽在copy按鈕上，點擊後將連結放進資料庫，在使用window.keypress去抓取如果有按這兩個按鍵，就觸發，但其實隨即也發現，道別的頁面是不行使用的，且如果是使用右鍵貼上，並不能完成功能。</p>

<h2>定義問題</h2>

<p>copy功能其實是一個很簡單的功能，很多網站都有，覺得應該是有簡易的方法，但是因為也感覺這應該是自己未知的領域，因此決定詢問google大神</p>

<h2>
    尋找與嘗試
</h2>
發現大部分的教法都有兩種：

```
execCommand() +select()
```


```
navigator.clipboard
```

但是其實對於網路上的講解與官方文件說明，都不是很理解確實在操作什麼。


<h2>關鍵點</h2>

在查找的過程中發現第一種方法，似乎已經過時了，連<a href="https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand">MDN</a>都不建議使用。因此就決定往第二的方法查詢，實際背後的技術、使用方式，其實來不是很理解，但已經知道怎麼使用。


<h2>
    回顧
</h2>

大部分的時候，我的思考點都會從最原始的方法去實作，但是因為其實目前的知識點還有很多要補足的，所以也不用對不是自己完全想出來的方法、功能感到灰心，gogogo!