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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JavaScript 複製到剪貼簿</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js">
  </script>
  <style>
    body { font-size: 10pt; }
    dd,dt { padding: 3px; }
  </style>
</head>
<body>
  <dl>
    <dt>測試區</dt>
    <dd>
      <textarea style="width: 250px;height: 50px;"></textarea>
    </dd>    
    <dt>按鈕複製內容</dt>
    <dd>
      <input value="Hello, " id="text1">
      <button data-clipboard-target="#text1">複製</button>
    </dd>
    <dt>點搫複製</dt>
    <dd>
      <input value="World!" id="text2" data-clipboard-target="#text2">
    </dd>

  </dl>
  <script>
    //透過selector標註所有複製觸發元素
    new ClipboardJS("[data-clipboard-target]");
  </script>
</body>
</html>

如此,點複製鈕甚至點擊欄位本身就能將欄位內容傳入剪貼簿,是不是簡單又方便呢?又學到一招!

歡迎推文分享:
Published 15 March 2018 11:33 PM 由 Jeffrey
Filed under:
Views: 5,759



意見

# Maoke Jackson said on 15 March, 2018 10:43 PM

用 Inoreader 看時程式碼時不會再斷成一行行,而是完整區塊了。

# Jeffrey said on 16 March, 2018 02:40 AM

to Maoke Jackson, 用 feedly 的我沒發現舊版有這 Bug... Orz 倒是遇到讀者還在用 RSS 讀我的部落格讓我一陣激動,呵。

# KID said on 16 March, 2018 10:10 PM

RSS讀者簽到 +1

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2018>
SunMonTueWedThuFriSat
25262728123
45678910
11121314151617
18192021222324
25262728293031
1234567
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication