js點擊複製文本

有些時候,我們希望讓用戶在網頁上完成某個操作就能自動將指定的內容複製到用戶計算機的剪貼板中。

但是出於安全原因,大多數現代瀏覽器都未提供通用的剪貼板複製接口(或即便有,也默認被禁用)。

只有IE瀏覽器可以通過如下方式來進行復制。

window.clipboardData.setData("Text", "這裏是需要複製的文本內容")
但想要實現跨瀏覽器的複製功能,我們就可以使用 ZeroClipboard。

ZeroClipboard 是國外大神開發的一個用於剪貼板複製的 JS 插件,它是基於 Flash 來實現跨瀏覽器的複製功能的。當我們使用 ZeroClipboard 的時候,它會悄悄隱藏一個小小的 Flash 影片(swf),不會對我們的用戶界面造成影響。我們只需要藉助它實現複製功能就行了。ZeroClipboard 中的 "Zero" 指的就是"不可見,零干擾"。

不過從 Flash 10開始,由於瀏覽器和Flash的安全限制,要求用戶必須在Flash區域上進行真實操作才能操作剪貼板。於是,ZeroClipboard 的作者想到一個辦法:它將 Flash 做成透明的,以便於我們放在諸如鏈接、按鈕等需要放置的任何地方。這樣,用戶界面看起來沒有變化,當點擊鏈接或按鈕時,實際上點擊是卻是 Flash,從而實現複製操作。

使用 ZeroClipboard 的方法非常簡單,我們只需要在頁面中引入它的一個JS文件並稍作配置(最簡單隻需一行代碼)即可(實際上還需要引入一個Flash的swf文件,不過 ZeroClipboard 會自動引入它)。

示例代碼:

<!-- 這裏是HTML代碼部分 -->
<textarea id="content" rows="10" cols="60">這裏是需要複製的內容</textarea>
<input id="copy" type="button" data-clipboard-target="content" value="複製">


<!-- 這裏是JS代碼部分 -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script>
<script type="text/javascript">
// 將【複製】按鈕充當複製數據的元素載體
var clip = new ZeroClipboard( document.getElementById("copy") );
</script>

以上就是引入並使用 ZeroClipboard 的最簡代碼。我們爲【複製】按鈕指定了data-clipboard-target屬性,其值爲將被複制數據的元素id。此時,我們點擊【複製】按鈕就可以複製id爲content的textarea中的文本數據。你可以點擊這裏 運行代碼

ps: 需要源碼示例demo, 可留郵箱。



發佈了23 篇原創文章 · 獲贊 32 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章