自學經驗回顧(HTML＆js 複製按鈕)

起因

最近為了製作一個小專案，而去查了 "複製按鈕" 的作法。
因為完全沒有頭續所以索性就直接google了，結果發現解決方式比想像中簡單。

解決方式

詳細程式碼

<p id="copy">This is the copy string!</p>
<button type="button" onclick="copyEvent('copy')">Copy</button>

<script>
    function copyEvent(id)
    {
        var str = document.getElementById(id);
        window.getSelection().selectAllChildren(str);
        document.execCommand("Copy")
    }
</script>

這個方法是利用 document.execCommand() 來觸發Copy指令，這是我第一次認識到這個方法。

之後我稍微研究了一下發現 document.execCommand() 還蠻有趣的，除了 "Copy" 之外還可以可以使用各式各樣的指令。

很可惜的是這個方法已經過時了，雖然還是有部份瀏覽器支援但還是不推薦使用。

Document.execCommand 詳細資料(MDN)

結語

解決問題時，雖然可以從網路上找到很多別人提供的解法，但在使用之前最好還是自己先研究一下，不要還不熟悉裡面的程式就無腦的複製貼上，不然就會像這次一樣，明明方法其實已經過時了卻還傻傻的拿去使用。