jQuery テキスト自動コピーの実装方法 – クリップボードへのテキストコピー

どうもこんばんは。今回は【jQuery テキスト自動コピーの実装方法 – クリップボードへのテキストコピー】というメモです。本方法では【jQuery ZeroClipboard】というプラグインの力を借ります。シンプルかつ安定して使える優良なプラグインですので機会があれば使ってみても。

実装方法

インプットや指定した要素、テキストエリアまで様々な要素の内容がコピー可能です、クリップボード内に保存させますので容量には注意が必要です。

【zClip】プラグインのダウンロード

JS

<script src="js/jquery-1.X.X.min.js"></script>
<script src="js/jquery.zclip.min.js"></script>

jQuery

$("a#copybtn1").zclip({
	path:"ZeroClipboard.swf",
	copy:$("input#text1").val(),
	beforeCopy:function(){
		//コピー前の操作
		$(‘#copybtn1’).text(‘COPY’);
	},
	afterCopy:function(){
		//コピー後の操作
		$(‘.btn’).text(‘COPY’);
		$(‘#copybtn1’).text(‘COPIED’);
	}
});

HTML

<input id="text1" type="text" value="これはinputコピー用のテキストです。">
<a id="copybtn1" class="btn">COPY</a>

　
以上になります。