HOME > JavaScript > jQuery > jQueryでボタンをクリックしてクリップボードにコピー

jQueryでボタンをクリックしてクリップボードにコピー

2013/03/10 2015/11/02 jQuery

■2015/11/01追記

以下記事でライブラリとか無しで同様の機能がつけられる。

IE以外では難しいとのことだけど、FireFox、Chromeでも

いけるみたい。

■ソース

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript" src="copyclipb.js"></script>
	<script type="text/javascript">
	$(function(){
	createCopyButton("swf1", "あいうえお", "コピー", 80);
	createCopyButtonFromTextbox("swf2", $("#txt2"), "コピー", 80);
	createCopyButtonFromTextbox("swf3", $("#txt3"), "コピー", 80);
	});
	</script>
	<title>copyclipb</title>
</head>
<body>

	<div>
		■固定文字列をコピー（この例では「あいうえお」）<br />
		<div id="swf1" class="btn">[copy]</div>
	</div>

	<div>
		■テキストボックスの内容をコピー<br />
		<input type="text" id="txt2" value="かきくけこ" /><br />
		<div id="swf2" class="btn">[copy]</div>
	</div>

	<div>
		■テキストエリアの内容をコピー<br />
		<textarea id="txt3" rows="5" cols="40">さしすせそー</textarea><br />
		<div id="swf3" class="btn">[copy]</div>
	</div>

</body>
</html>

■ダウンロード先

・swfobject.js
http://code.google.com/p/swfobject/
・copyclipb.js
http://hhh.j73x.com/memo/e/10722.html

■サンプル

http://sample.taitan916.info/copyclipd/

↓↓のサイト様を参考にさせていただきました。

http://hhh.j73x.com/memo/e/10722.html

シンプルかつ複数設置も容易なのですごく良い感じ。

- jQuery