iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

30天學習30套前端技術(2018年)系列 第 38

[十分鐘學習] clipboard.js - 複製/貼上

  • 分享至 

  • xImage
  •  

example1

複製內容到剪貼簿的小工具,不依賴Flash,大小只要3KB

GitHub Star: 20,000
Javascripting Overall: 90%
瀏覽器: ChromeFirefoxIE12+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- clipboard.js v1.7.1 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
    
  • npm

      $ npm install clipboard --save
    

《範例》

  • 點選按鈕,複製欄位內容

      <input id="example" value="Hello World">
       <!-- 
       	屬性設定[註1] 
      	data-clipboard-target: 目標物件,將會複製物件的內容
       -->
      <button id="copy" data-clipboard-target="#example">複製</button>
      <script>
      	new Clipboard( "#copy" );
      </script>
    

    [註1]

    屬性 描述

    data-clipboard-action|動作,cut是剪下
    data-clipboard-target|目標物件,將會複製物件的內容
    data-clipboard-text|複製內容


《延伸》

  1. clipboard.js — Copy to clipboard without Flash
  2. zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped

上一篇
[十分鐘學習] Sortable - HTML物件乾坤大挪移
下一篇
[十分鐘學習] howler.js - 音源播放函式庫
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言