サンプル・プログラム
クリップボードにコピーできたら、ペースト（ctrl-V）をクリックすることで任意の場所へ貼り付けられる。
プログラムの解説：jQuery
42: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
プログラムの解説：ZeroClipboardの準備
43: <script src="http://www.pahoo.org/common/js/ZeroClipboard/ZeroClipboard.min.js"></script>
プログラムの解説：ZeroClipboardの使い方
44: <script type="text/javascript">
45: $(document).ready(function() {
46: var clip_url = new ZeroClipboard($("#copy_url"));
47: var clip_title = new ZeroClipboard($("#copy_title"));
48: var clip_description = new ZeroClipboard($("#copy_description"));
49: });
50: </script>
189: <body>
190: <h2>{$title_2} {$version}</h2>
191: <form name="myform" method="post" action="{$myself}" enctype="multipart/form-data">
192: URL：
193: <input type="text" name="url" id="url" size="50" value="{$url}" />
194: <input type="submit" id="exec" name="exec" value="取得" />
195: <input type="button" id="copy_url" name="copy_url" value="コピー" data-clipboard-target="url" />
196: <hr style="text-align:left; margin-left:0; width:500px;"/>
197: TITLE：
198: <input type="text" name="title" id="title" size="50" value="{$title}" />
199: <input type="button" id="copy_title" name="copy_title" value="コピー" data-clipboard-target="title" /><br /><br />
200: DESCRIPTION:<br />
201: <textarea id="description" name="description" rows="4" cols="65">{$description}</textarea><br />
202: <input type="button" id="copy_description" name="copy_description" value="コピー" data-clipboard-target="description" />
203: </form>
それぞれZeroClipboard オブジェクトとして、冒頭に発生させている。引数はボタンの要素（ここではID）を指定する。
ここでは、コピー・ボタンをHTMLタグの '<input type="button />"' で作成する。他のHTMLタグにも対応している。
属性 data-clipboard-target により、コピー元の要素IDを指定する。
補足
これを使う場合は、JavaScriptを以下のように変更する。
42: <script type="text/javascript">
43: document.addEventListener('DOMContentLoaded', function() {
44: document.getElementById('copy_url').addEventListener('click', function() {
45: var target = document.getElementById('url');
46: var range = document.createRange();
47: range.selectNode(target);
48: window.getSelection().addRange(range);
49: document.execCommand('copy');
50: window.getSelection().removeAllRanges();
51: range.detach();
52: });
53: document.getElementById('copy_title').addEventListener('click', function() {
54: var target = document.getElementById('title');
55: var range = document.createRange();
56: range.selectNode(target);
57: window.getSelection().addRange(range);
58: document.execCommand('copy');
59: window.getSelection().removeAllRanges();
60: range.detach();
61: });
62: document.getElementById('copy_description').addEventListener('click', function() {
63: var target = document.getElementById('description');
64: var range = document.createRange();
65: range.selectNode(target);
66: window.getSelection().addRange(range);
67: document.execCommand('copy');
68: window.getSelection().removeAllRanges();
69: range.detach();
70: });
71: });
72: </script>
参考サイト
そこで今回は、ZeroClipboardというJavaScriptライブラリを使い、ブラウザに依存しないクリップボード処理を実装する。IE9以上、Chrome、Firefox、Safariでの動作を確認した。
なお、ZeroClipboardはjQuery とFlashを利用する。