JavaScript 將輸入欄位內容複製到剪貼簿

部落格原本用的程式碼顏色標示(Syntax Highlight)套件是十年前的產物，早就跟不上程式語言演進腳步，上篇文章起網站悄悄改版，改用支援 176 種語法及 76 種樣式並持續更新的 highlight.js。(列入評估的另一選項 prism.js 也很出色，頗難抉擇，最後選定 Github 觀注度較高的 highlight.js。延伸閱讀：Top 5 : Best code syntax highlighter javascript plugins | Our Code World)
highlight.js 未內建複製到剪貼簿功能，上網逛了一圈，大家一致推崇 clipboard.js。試用心得頗佳，輕鬆上手但威力強大，採純 JavaScript(不需 Flash，IE9+ 可用)，特整理筆記分享推薦。
註: 為防大家沒注意到我有加上「點選圖示複製程式碼」功能，錄了一段示範：(圖示的大小及位置會太低調嗎? XD)

在此示範整合 clipboard.js 兩種最常見做法：另設複製按鈕、點擊欄位本身複製。使用方法很簡單，網頁引用 clipboard.js，在要觸發複製動作的元素(按鈕或是<input type="text">或<textarea>本身)加上 data-clipboard-target="#selector" 指向複製內容的來源。使用 new ClipboardJS(selector) 為觸發動作元素加上複製功能，selector 是複製觸發元件選擇器，為求省事此處用 [data-clipboard-target]，實務上多半會賦與它們共用的 class 樣式以利快速選取。除此之外，還有將複製文字寫成屬性(data-clipboard-text)、改成剪下到剪貼簿(data-clipboard-action="cut")、掛載事件等進階用法，詳情可參考官網首頁，網站介紹很淺顯易懂，此處就不多贅述。
完整程式範例如下：Live Demo



原始文章出自於此