JS把字符串存入系統剪貼板

時間 2019-11-11

原文原文鏈接

最近項目須要，要實現複製黏貼功能，以前作好了只能實現本身頁面的複製黏貼（也不是真正的複製黏貼是經過投機取巧的，就是複製的時候把數據存入數組，黏貼的時候再把數據取出來），無法實現把數據存入本地的剪貼板而後能夠本身一個文檔中實現粘貼，因此就找了一下資料，找到了主要的有四種方法： zeroclipboard 、document.execCommand("Copy")、clipboard、setData(). 找了些資料發現第一種須要使用flash的第四種瀏覽器的兼容性差只能在IE中使用第三種因爲未知緣由本身的項目中無法使用因此只有使用的 clipboard 使用起來很簡單先下載插件後把 clipboard.min.js導入 html 頁面以下：javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./clipboard.min.js"></script>
function onclick111(){
	var clipboard = new Clipboard('.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);
	});
	
	$(".btn").attr("data-clipboard-text","你要傳的字符串");
	//$(".btn").click();（當由另外一個點擊事件觸發的時候，實現讓其自動點擊）
}
</head>
<body>
	
<div style="display:none">
<button class="btn" data-clipboard-action="copy" data-clipboard-text="1" onclick="onclick111()"></button>
</div>

	
</body>
</html>

還能夠實現讓一個元素的內容複製 html

把data-clipboard-text 替換給data-clipboard-targetjava

具體以下：jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./clipboard.min.js"></script>
function onclick111(){
	var clipboard = new Clipboard('.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);
	});
	
	$(".btn").attr("data-clipboard-text","你要傳的字符串");
	//$(".btn").click();（當由另外一個點擊事件觸發的時候，實現讓其自動點擊）
}
</head>
<body>
<textarea id="text">選擇的內容</textarea>	
<div style="display:none">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#text" onclick="onclick111()"></button>
</div>

	
</body>
</html>

須要隱藏的時候使用第一種方法不須要隱藏的時候使用第二種數組