首頁 > web前端 > js教程 > 主體

不依賴Flash和任何JS庫實作文字複製與剪切附源碼下載_javascript技巧

WBOY
發布: 2016-05-16 15:37:01
原創
904 人瀏覽過

效果圖如下:

我們在網頁上放置一個複製按鈕,主要用來方便用戶複製鏈接之類的複雜文本,以往的做法是,通過JS依靠Flash,甚至借助jQuery龐大的js庫來實現文本複製到剪貼板的。今天要跟大家介紹的是一款極現代的,不需要flash,不依賴任何其他js庫的非常小的插件,它叫做clipboard.js。

查看示範 下載原始碼

HTML

首先載入本機clipboard.js檔案。

複製程式碼 程式碼如下:


然後就是在body中加上要複製或剪下的文字網域內容以及按鈕。

複製程式碼 程式碼如下:



這裡,我們使用了HTML5的data-屬性,用來定位複製物件目標,它指向了文字域#foo,說明複製的是#foo中的value內容,aria-label屬性定義了複製成功後的訊息,用來提示複製結果訊息。

還有個屬性data-clipboard-action,它定義當前操作是複製還是剪切,預設是複製,當data-clipboard-action="cut",這時,點擊按鈕將會剪切文本,跟WORD操作一樣。當然,剪切操作僅適用於text和textarea。

我們也可以不需要input和textarea等元素內容作為複製對象,我們可以將要複製的內容透過ata-clipboard-text屬性定義在按鈕上,點擊按鈕就可以複製到ata-clipboard-text對應的內容。

複製程式碼 程式碼如下:


Javascript

將以下一句程式碼加入

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板