在瀏覽器中實現複製內容到剪下板中

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

前言

前端開發時，經常有這種功能，需要把網頁中的有些內容複製到剪下板中。

針對IE瀏覽器來說，實現起來就很簡單，因為直接有clipboardData 的物件可以使用，

但是對於其他瀏覽器來說，並沒有這個物件，如何實現，目前比較多的解法都是藉助flash。

除此之外，這個功能如果應用在Extjs 中該如何實現。（目前為止， Extjs 本身並沒有提供相關的方法）

在IE中的實現

在IE中實現起來就很簡單，使用 window.clipboardData 這個物件的setData 方法就可以了。

直接看例項：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
	function copyToClipboard() {
		var svalue = document.getElementById("textInput").value;
		window.clipboardData.setData("Text", svalue);
	}
</script>
</head>
<body>
	<input type="text" id="textInput" />
	<input type="button" value="Copy Text" onclick="copyToClipboard()" />
</body>
</html>

在非IE 瀏覽器的實現

網路上提供的使用flash解法也比較多, 常用的是 zeroclipboard.

可以到

下載，下載之後主要使用

ZeroClipboard.js 和 ZeroClipboard.swf 檔案。將這兩個檔案放在同一目錄下，

還是看一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="../lib/ZeroClipboard.js"></script>
</head>
<body>
	<button id="copy-button" data-clipboard-text="Copy Me!"
		title="Click to copy me." data-clipboard-target="fe_text">Copy
		to Clipboard</button>

	<textarea id="fe_text" cols="50" rows="3">Input Copy Text</textarea>

	<script type="text/javascript">
		var client = new ZeroClipboard(document.getElementById("copy-button"));

		client.on("ready", function(readyEvent) {
			client.on("aftercopy", function(event) {
				alert("Copy Success. " + event.data["text/plain"]);
			});
		});
	</script>
</body>
</html>

說明一下：

1. ZeroClipboard 這個js 物件就是用來做複製剪下板的作用的，構造時傳入一個觸發的元素就可以了（document.getElementById("copy-button")）

2. 以上的 “copy-button”的按鈕，需要指定它copy 什麼資料，以下方式可以2選1

1）data-clipboard-text，直接指定需要Copy 的值

2） data-clipboard-target，需要Copy 元素的值的Id

3. 可以給構造的物件新增一些事件函式，例如ready, aftercopy

適合所有瀏覽器的方式

要使用所有瀏覽器，只需要把以上兩種方式彙總一下就可以了，這裡就不多介紹了。

在Extjs 中的使用

如果使用的是Extjs 的框架的話，一般狀況下是在menuitem 上需要這種功能,就可以使用如下方式定義menu item

var CopyLinkAction = Ext.create('Ext.menu.Item', {
		text : 'Copy Link',
		listeners : {
			afterrender : function(comp, eOpt) {
				var el = comp.getEl().dom;
				var clip = new ZeroClipboard(el);				
				clip.setData("text/plain", "your data");
				clip.on("ready", function(readyEvent) {
					// alert( "ZeroClipboard SWF is ready!" );
					clip.on("aftercopy", function(event) {
						// alert("Copy Success. " + event.data["text/plain"] );
						alert("Copy Link Success.");
					});
				});
			}
		}
	});

原理就是在menuitem ready 之後，替換menuitem 的html.

jQuery實現複製到剪下板

前段時間需要做一個點選一個按鈕，把制定內容複製到剪下板的效果。對於IE瀏覽器而言，有一簡單的方法，通過 window.clipboardData：（假如有一個id為copy的按鈕，有一個i

用vue實現複製到剪下板 clipboard.js

用vue實現複製到剪下板通過在網上檢視比較，發現使用clipboard.js是比較理想的手段：1，不用flash，2，外掛很小，壓縮後只有3kb。關於clipboard.js，官方文件請戳：https://clipboardjs.com。由於文件是英文的

在瀏覽器中實現複製內容到剪下板中

前言前端開發時，經常有這種功能，需要把網頁中的有些內容複製到剪下板中。針對IE瀏覽器來說，實現起來就很簡單，因為直接有clipboardData 的物件可以使用，但是對於其他瀏覽器來說，並沒有這個物件，如何實現，目前比較多的解法都是藉助flash。除此之外，這個

將input框中的值複製到瀏覽器的剪下板中

<input type="hidden" id="qrcodeUrl" value="https://www.baidu.com"> <button class="button-code button-copy">複製連結</button

JS實現複製文字到電腦剪下板中

程式碼實現（吐槽：百度上各種方法，就是不好使。或者就是引用第三方外掛，去stackoverflow，一下就解決，所以啊，多用谷歌）已測試谷歌和IE（8） function copyStringToC

個人js學習細節- 實現點選按鈕複製文字框中文字到剪下板中的方法

主要程式碼： <textarea name="text" id="text" cols="30" rows="10"></textarea> <button onclick="myCopy()">點選複製文字框內的內容</button><br

C#實戰小技巧（八）：將剪下板中的內容儲存為圖片

進行C#開發時，可以將複製到剪下板中的內容轉為HTML檔案，再將HTML頁面轉為圖片進行儲存，示例效果如下。被複制的Excel表格：生成的圖片：實現上述功能的主要程式碼如下，能夠將從Word、Excel、網頁等地方複製的內容匯出，並儲存為圖片。程式碼：

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

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

讓input支援 ctrl v上傳貼上圖片? 讓input支援QQ截圖或剪下板中的影象資料(Java實現儲存)

原理：監聽貼上 → 獲取貼上內容 → 將內容上傳 → 抓取後返回替換至input 我們在生產中用到的介面：測試地址 http://sms.reyo.cn 使用者名稱：aa 密碼：123456 以下是PHP實現： <?php header("Access-Control-A

android實現文字資訊複製，剪下板（ClipboardManager）

做個記錄，以備日後查閱注意：導包的時候 API 11之前： android.text.ClipboardManagerAPI 11之後： android.content.ClipboardManager /** * 實現文字複製功能 * add by wangqia

unity3D，PC、Android、IOS將內容複製到剪下板

原博：https://blog.csdn.net/YE_wolf/article/details/768314461.PC平臺下12//Window剪下板處理GUIUtility.systemCopyBuffer = copyText;2.Android平臺下先新增jar包，

JS複製到剪下板（相容主流所有瀏覽器）

1、主要用到github上的一個開源的專案：clipboard.js 2、clipboard.js 可以實現純JS複製資料到剪下板中（無需flash支援）跟現在主流的zeroclipboard 比起來方便了不止一點兩點（畢竟不是所有人都會裝flash外掛的）

angularjs-相容各種瀏覽器的複製到剪下板功能的程式碼

實現原理就是：動態生成隱藏文字域，把要複製的內容放到該文字域，然後依次執行DOM裡的選中，複製功能就可以（有些程式碼是非相關的可以忽略）。注意，不要在非直接點選觸發的函式裡用document.execCommand('copy')的方法，因為瀏覽器的安全機制會禁止使用。另外

vi中的大篇幅文字怎麼複製到剪下板

轉：網上有兩種說法比較多：“：1,$y”和 “dG” 但是我查到有資料顯示:1,$y是全部複製，不是全選dG這是刪除游標所在行到最後一行的內容（包括游標所在行的內容）還有一個命令是 ggVG解釋是：gg 讓游標移到首行，在vim才有效，vi中無效V 是進入Vis

記一個複製黏貼的功能想法（黏貼剪下板中的數字自增,複製黏貼自增）

起因照例是要寫起因的，起因非常之簡單，不知道大家有沒有遇到過需要輸入連續的 id= 101 ～ id = 110 這類數字的時候，這個時候能做的基本上是複製100，黏貼100，然後手動改 101,102，在我的腦海裡，除了使用excel ，其他沒有很

微信瀏覽器-複製到剪下板-clipboard.js外掛

之前寫過一篇部落格，介紹一個複製到剪下板的外掛，ZeroClipboard，什麼都hen好，然而就是不支援微信瀏覽器，我也沒找到什麼解決方案，我就嚴正拒絕了產品經理的需求。直到今天被產品看到一個其他yin的h5，竟然可以實現複製到剪下板的功能，

複製到剪下板外掛clipboard.js原始碼解析

clipboard.js 是一個小型的複製到剪下板外掛，只有3kb，非flash 前言公司專案有用到clipboard.js，由於好奇心順手點開了原始碼看看其究竟是如何實現的，本以為是九曲十八彎錯綜複雜，其實還是挺容易看懂的，所以就分享下讀後感哈哈。本篇讀後感分為四部分，分別為前言、解析、

點選將文字複製到剪下板

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

小工具：根據剪下板中的url生成markdown程式碼

參考部落格：爬CSDN部落格 - CSDN部落格在部落格寫作中，我經常遇到這樣一個問題：當我需要掛出一些網站連結，比如參考部落格或者OJ連結的時候，需要用這樣 [爬CSDN部落格](https://blog.csdn.net/qq_17172105/article/

Unity3D-將文字複製到剪下板

Unity裡將文字複製到剪下板中需要分別在Android和IOS中實現 iOS端實現Clipboard.mm @interface Clipboard : NSObject extern "C" { /* compare the namelist

在瀏覽器中實現複製內容到剪下板中

前言

在IE中的實現

在非IE 瀏覽器的實現

適合所有瀏覽器的方式

在Extjs 中的使用

相關推薦