ZeroClipboard實現跨瀏覽器點選複製文字功能

阿新 • • 發佈：2019-01-12

後臺開發過程中常常要實現點選複製文字的功能，但很多瀏覽器出於安全考慮不支援js複製文字，使用開源庫ZeroClipboard可以很好地解決該問題。

在頁面上引入ZeroClipboard並配置好ZeroClipboard.swf的路徑。（ZeroClipboard使用flash來實現複製，無法在移動端使用）

在頁面載入完之後找到要實現點選複製功能的dom元素。

用ZeroClipboard為它們新增點選複製功能，複製的內容為該元素的data-clipboard-text屬性。

示例如下：

<html>
<head>
	<title>ZeroClipboard測試</title>
	<script src="../lib/jquery.js"></script>
	<script src="ZeroClipboard.min.js"></script><!-- 引入ZeroClipboard -->
	<script>
		//設定ZeroClipboard的swf路徑
		ZeroClipboard.config( { swfPath: 'ZeroClipboard.swf' } );
	</script>
</head>
<body>
<p><a href="javascript: void(0);" class="copy-btn" data-clipboard-text="Msg1">複製Msg1</a></p>
<p><a href="javascript: void(0);" class="copy-btn" data-clipboard-text="Msg2">複製Msg2</a></p>
<p><a href="javascript: void(0);" class="copy-btn" data-clipboard-text="Msg3">複製Msg3</a></p>

<script>
$(function() {
	//將需要新增複製功能的dom元素找出來，這裡是class是copy-btn的元素
	var doms = [];
	$('.copy-btn').each(function() {doms.push(this);});
	//通過ZeroClipboard為這些元素新增複製功能，元素的data-clipboard-text屬性為要複製的內容
	var clip = new ZeroClipboard(doms);
	//設定aftercopy事件讓複製成功後彈窗提示
	clip.on('aftercopy', function() {alert('複製成功');});
});
</script>
</body>
</html>

注意：只有在服務端環境下才生效，本地直接用瀏覽器開啟無法複製。這裡使用的ZeroClipboard為2.x版本。

ZeroClipboard實現跨瀏覽器點選複製文字功能

後臺開發過程中常常要實現點選複製文字的功能，但很多瀏覽器出於安全考慮不支援js複製文字，使用開源庫ZeroClipboard可以很好地解決該問題。在頁面上引入ZeroClipboard並配置好ZeroClipboard.swf的路徑。（ZeroClipboard使用fl

js實現點選複製文字內容

用js實現點選複製文字

function copyText(ele){ //複製文字需要在文件中新增一個複製用的input var copyDOM = ele; //要複製文字的節點 var range = document.createRange(); //建立一個ra

ios實現點選複製文字到剪貼簿

移動端點選複製文字到剪貼簿： html程式碼： <span id="data">複製我到剪貼簿</span> <button class="button" type="button" id="button">點選複製</butt

js 實現點選複製文字內容

js 實現點選複製文字內容 <table> <tr><td>姓名：<span onclick="copyContent(this);" title="點選複製">張三</span></td>

zeroclipboard實現跨瀏覽器複製功能

所需檔案 1. ZeroClipboard.js 2. ZeroClipboard.swf 使用 1. 設定好ZeroClipboard.swf的位置，可在ZeroClipboard.js中修改，也可呼叫ZeroClipboard.setMoviePath方法 2. var clip = new Zero

JS點選複製文字

html 1 <p>邀請碼:<i>999999999999</i> <span class="copys">複製</span> </p> 2 <textarea rows="" style="disp

Html點選複製文字內容

(function name(params) { 'use strict'; //新增點選事件 document.body.addEventListener('click', copy, true); //copy事件

實現點選複製貼上功能

實現功能:實現點選轉換為固定格式的json格式;並且實現點選複製功能使用前端程式碼實現: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

點選複製按鈕複製指定文字內容，實現網頁中的複製功能

jq 點選複製div裡面的內容如果貼上到富文字中，會將樣式，裡面所有的標籤，文字一併貼上進去

<!doctype html> <html> <head> <meta charset="utf-8"> <title>點選複製功能</title> </head> <script src="http://code

【Html】Clipboard.js 實現點選複製，剪下板操作

可以使用cdn 或者直接下載設定好引用路徑(百度雲下載) <script type="text/javascript" src="./dist/clipboard.min.js"></script> html <input type

點選將文字複製到剪下板

<div class="uploder_content" id="copyText" data-clipboard-action="copy" data-clipboard-target="#copySpan" onclick="copyText(this

Clipboard外掛實現點選複製功能，並且自動跳轉

Clipboard外掛是現在流行的實現複製功能的外掛之一，公司給了一個需求，要求能實現點選複製功能，於是乎就在這給大家分享一下經驗。外掛的下載以及使用百度搜索可以搜尋到，就不多說，直接上程式碼。 html部分，Clipboard功能很強大，它可以實現文字框內的複

手機實現點選複製的坑

點選複製有三種方式兩種外掛另一種是原生的寫（我比較建議用原生寫）目前關於點選複製的外掛我知道的有ZeroClipboard.Core.js和clipboard.min.js ZeroClipboard.Core.js 看了好多這個依附於flash clipboard.min.js 安卓手機沒問題，

textview中點選效果實現，比如點選textview中實現圖片和文字的顏色變化（類似於button）

<TextView android:drawableTop="@drawable/bg_text_view" android:id="@+id/home_toolbar_settings" an

使用ZeroClipboard解決跨瀏覽器複製到剪貼簿的問題

Zero Clipboard的實現原理 Zero Clipboard 利用透明的Flash讓其漂浮在複製按鈕之上，這樣其實點選的不是按鈕而是 Flash ，這樣將需要的內容傳入Flash，再通過Flash的複製功能把傳入的內容複製到剪貼簿。 Zero Clipboard的安

js實現點選複製功能

一、實現點選按鈕，複製文字框中的的內容<script type="text/javascript">function copyUrl2(){var Url2=document.getElementById("biao1");Url2.select(); // 選擇

【微信小程式常見問題】點選指定文字實現指定文字變色解決方案一

1、效果展示 2、關鍵程式碼 index.wxml index.wxss index.js 3、原始碼獲取方式百度雲連結：http://pan.baidu.com/s/1gfJU6Sb 密碼：p6hy 4、在編寫點選指定文字實現指定文字變色過程中有遇到任何問題獲取

Clipboard.js 實現點選複製

在開發過程中難免會遇到點選分享的需求，這裡有兩種實現方式：第一種：通過原生js 的方法用（存在相容性）： document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)** 引

ZeroClipboard實現跨瀏覽器點選複製文字功能

相關推薦