主題:Clipboard.js – 現代方式複製文本到剪貼板    

刊登時間:2019/5/16 17:48:41    點閱率:52


     



複製文本到剪貼板應該並不難,目前已經有很成熟的Flash 方法。但是Flash 已經在很多場合不適用了,特別是隨著HTML5 技術的發展。今天推薦的這個Clipboard.js 庫不依賴Flash,依賴於Selection 和execCommand API。execCommand 支持以下瀏覽器:Chrome瀏覽器42+,火狐41+,IE9+。

Why

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.

That’s why clipboard.js exists.

Install

You can get it on npm.

npm install clipboard --save

Or if you’re not into package management, just download a ZIPfile.

Setup

First, include the script located on the dist folder or load it from a third-party CDN provider.

<script src="dist/clipboard.min.js"></script>

Now, you need to instantiate it by passing a DOM selectorHTML element, or list of HTML elements.

new ClipboardJS(’.btn’);

Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.

For this reason we use event delegation which replaces multiple event listeners with just a single listener. After all, #perfmatters.

Usage

We’re living a declarative renaissance, that’s why we decided to take advantage of HTML5 data attributes for better usability.

Copy text from another element

A pretty common use case is to copy content from another element. You can do that by adding a data-clipboard-targetattribute in your trigger element.

The value you include on this attribute needs to match another’s element selector.

<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">  <!-- Trigger --> <button class="btn" data-clipboard-target="#foo">     <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>

Cut text from another element

Additionally, you can define a data-clipboard-action attribute to specify if you want to either copy or cut content.

If you omit this attribute, copy will be used by default.

<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea>  <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">     Cut to clipboard </button>

As you may expect, the cut action only works on <input> or <textarea> elements.

Copy text from attribute

Truth is, you don’t even need another element to copy its content from. You can just include a data-clipboard-text attribute in your trigger element.

<!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn’t mean you should — clipboard.js">     Copy to clipboard </button>

Events

There are cases where you’d like to show some user feedback or capture what has been selected after a copy/cut operation.

That’s why we fire custom events such as success and error for you to listen and implement your custom logic.

var clipboard = new ClipboardJS(’.btn’);  clipboard.on(’success’, function(e) {     console.info(’Action:’, e.action);     console.info(’Text:’, e.text);     console.info(’Trigger:’, e.trigger);      e.clearSelection(); });  clipboard.on(’error’, function(e) {     console.error(’Action:’, e.action);     console.error(’Trigger:’, e.trigger); });

For a live demonstration, just open your console :)

Tooltips

Each application has different design needs, that’s why clipboard.js does not include any CSS or built-in tooltip solution.

The tooltips you see on this demo site were built using GitHub’s Primer. You may want to check that out if you’re looking for a similar look and feel.

Advanced Usage

If you don’t want to modify your HTML, there’s a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.

For instance, if you want to dynamically set a target, you’ll need to return a Node.

new ClipboardJS(’.btn’, {     target: function(trigger) {         return trigger.nextElementSibling;     } });

If you want to dynamically set a text, you’ll return a String.

new ClipboardJS(’.btn’, {     text: function(trigger) {         return trigger.getAttribute(’aria-label’);     } });

For use in Bootstrap Modals or with any other library that changes the focus you’ll want to set the focused element as the container value.

new ClipboardJS(’.btn’, {     container: document.getElementById(’modal’) });

Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here’s how you clean up the events and objects that we create.

var clipboard = new ClipboardJS(’.btn’); clipboard.destroy();

Browser Support

This library relies on both Selection and execCommand APIs. The first one is supported by all browsers while the second one is supported in the following browsers.

 

  • Chrome logo

    Chrome 42+

  •  
  • Edge logo

    Edge 12+

  •  
  • Firefox logo

    Firefox 41+

  •  
  • Internet Explorer logo

    IE 9+

  •  
  • Opera logo

    Opera 29+

  •  
  • Safari logo

    Safari 10+

 

 

 

 

熱門文章 :
JQuery應用 : HTML5應用 : CCS3應用 :
  • 使用jQuery & CSS3 製作美麗的照片畫廊(117)


  • 5種風格的jQuery 分頁效果(108)


  • Notyf – 響應式的JavaScript 通知插件!(95)


  • 基於jQuery 實現的精緻作品集圖片導航效果(72)


  • jQuery留言評論發布代碼(64)


  • 基於jQuery 實現動畫內容菜單(62)


  • jQuery移動端雙擊圖片放大特效(62)


  • jQuery浮動廣告橫幅代碼(56)


  • 帶分類和縮略圖顯示的jquery相冊特效(56)


  • 使用jQuery UI 創建簡單的電影搜索應用界面(50)


  • HTML5 SVG卡通水母動畫特效(238)


  • HTML5鼠標跟隨立方體碎片特效(203)


  • HTML5 Canvas大波浪動畫特效(183)


  • HTML5文字跑馬燈動畫特效(156)


  • HTML5 SVG情人節盒子動畫特效(150)


  • HTML5 Canvas流動線條動畫特效(122)


  • HTML5線條照射愛心動畫特效(105)


  • 12個很炫的HTML5 和CSS3 應用示例(68)


  • HTML5繪製彩色圓圈動畫特效(63)


  • HTML5線條像素背景動畫特效(59)


  • CSS3圓點冒泡背景動畫特效(327)


  • Creative CSS Loading Animations(276)


  • CSS3轉盤抽獎動畫特效樣式(221)


  • 純CSS實現帶縮略圖的圖片相冊幻燈片效果(84)


  • CSS技巧:逐幀動畫抖動解決方案(81)


  • 純CSS3聖誕樹雪花飄落動畫特效(71)


  • 純CSS打造的鼠標懸停會顯示邊框和描述的圖片相冊特效(66)


  • 23種漂亮的純CSS導航菜單(65)


  • 經典網頁設計:30個創意的CSS 應用案例(65)


  • 45款高質量的免費(X)HTML/CSS模板(64)


  • 素材資源 : 網頁設計 : 創意欣賞 :
  • SVG的形狀懸停效果 (一)(567)


  • SVG的形狀懸停效果 (二)(126)


  • HTML5三維立體泡沫方塊移動特效(69)


  • 精品資源:40個實用的PSD 貼紙模板《下篇》(64)


  • 創建紋理文本的技巧(63)


  • SVG的形狀懸停效果 (三) (61)


  • 支付信息提交組件網頁模板(57)


  • Sliding Header Layout (二)(56)


  • 3D Shading with Box-Shadows(46)


  • Recreating the “Design Samsung” Grid Loading Effect(43)


  • LightGallery.js – 功能齊全的Lightbox 效果(158)


  • 具有Three.js的交互式排斥效果 (二)(91)


  • 令人稱讚的以辦公環境為背景的網站作品(87)


  • 具有Three.js的交互式排斥效果 (一)(83)


  • 舌尖上的設計!10個美味的餐館和食品網站(82)


  • 20款優秀的國外Mobile App 界面設計案例(76)


  • 絲帶(Ribbon)在網頁設計中應用的20佳案例(61)


  • 20個以矩形元素為特色的創意網站設計作品(59)


  • 20個國外優秀的網頁色彩搭配案例(57)


  • 基於jQuery實現聯想大屏焦點圖切換(52)


  • 50個最優秀的Photoshop 實例教程【文字特效篇】(147)


  • 經典網頁設計:20個值得關注的創意作品集網站示例(140)


  • 【特別推薦】12套精緻的網站和移動應用界面設計素材(99)


  • 激發靈感:26個清爽的藍色調網頁設計作品欣賞(79)


  • 【推薦閱讀】簡單之美:30個極簡主義風格的網站作品(66)


  • 經典網頁設計:15個使用網格系統的精美網站作品(60)


  • 【年度盛宴】2019年排名前20位的CSS 網站作品(59)


  • 太有才了!史上最有創意的404頁面設計集錦(54)


  • 經典回顧——2019年度最佳網頁設計作品出爐【下篇】(51)


  • 15款加速Web開發的JavaScript框架(49)


  • 網頁模板 : 手機模板 : 網路科技 :
  • 照片藝術日誌網頁模板(92)


  • 圖片日誌信息網頁模板(79)


  • SNS分享圖標按鈕網頁模板(68)


  • 歡迎使用TEMPLATED提供的免費響應式網站模板(60)


  • Mountain Slider(50)


  • 個人圖片信息介紹網頁模板(49)


  • 藍色精美風格的品牌家居商城網站模板下載(48)


  • 閃爍暗紅娛樂信息網頁模板(45)


  • 黑色標準風格的引導頁模板下載(42)


  • 紅色圖片列表網頁模板(41)


  • 香脆食品料理響應式網頁模板(83)


  • 圖片相冊展示響應式網頁模板(80)


  • Metro圖片信息展示響應式網頁模板(70)


  • 簡潔產品展示網店響應式網頁模板(64)


  • Fringilla Fermentum Tellus(64)


  • 藝術畫館網頁模板(63)


  • 漢堡餐廳響應式網頁模板(63)


  • 女包商城展示響應式網頁模板(62)


  • 精品餐廳美食展示響應式網站模板(62)


  • 藝術圖片展示響應式網頁模板(62)


  • 15款方便團隊溝通的即時聊天工具(233)


  • 20款你沒聽說過的小眾Web瀏覽器(142)


  • 50款Android 移動應用程序圖標【下篇】(137)


  • 傳說這個是35 個最好用Vue 開源庫(120)


  • 30個超棒的SVG動畫展示【上篇】(100)


  • 50個最實用的Photoshop 實例教程【照片特效篇】(92)


  • 8款Chrome插件讓你的標籤頁更酷炫(87)


  • OverAPI.com – 史上最全的開發人員在線速查手冊(85)


  • Clipboard.js – 現代方式複製文本到剪貼板(52)


  • 20個使用手寫字體的作品欣賞(49)


  •     

    服務電話:0982-450920(亞太)、0905-147856(中華)、0970-755956(台哥大) 陳老師