サンプル・プログラム
クリップボードにコピーできたら、ペースト(ctrl-V)をクリックすることで任意の場所へ貼り付けられる。
プログラムの解説:jQuery
0042: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
プログラムの解説:ZeroClipboardの準備
0043: <script src="https://www.pahoo.org/common/js/ZeroClipboard/ZeroClipboard.min.js"></script>
プログラムの解説:ZeroClipboardの使い方
0044: <script type="text/javascript">
0045: $(document).ready(function() {
0046: var clip_url = new ZeroClipboard($("#copy_url"));
0047: var clip_title = new ZeroClipboard($("#copy_title"));
0048: var clip_description = new ZeroClipboard($("#copy_description"));
0049: });
0050: </script>
0189: <body>
0190: <h2>{$title_2} {$version}</h2>
0191: <form name="myform" method="post" action="{$myself}" enctype="multipart/form-data">
0192: URL:
0193: <input type="text" name="url" id="url" size="50" value="{$url}" />
0194: <input type="submit" id="exec" name="exec" value="取得" />
0195: <input type="button" id="copy_url" name="copy_url" value="コピー" data-clipboard-target="url" />
0196: <hr style="text-align:left; margin-left:0; width:500px;"/>
0197: TITLE:
0198: <input type="text" name="title" id="title" size="50" value="{$title}" />
0199: <input type="button" id="copy_title" name="copy_title" value="コピー" data-clipboard-target="title" /><br /><br />
0200: DESCRIPTION:<br />
0201: <textarea id="description" name="description" rows="4" cols="65">{$description}</textarea><br />
0202: <input type="button" id="copy_description" name="copy_description" value="コピー" data-clipboard-target="description" />
0203: </form>
それぞれZeroClipboard オブジェクトとして、冒頭に発生させている。引数はボタンの要素(ここではID)を指定する。
ここでは、コピー・ボタンをHTMLタグの '<input type="button />"' で作成する。他のHTMLタグにも対応している。
属性 data-clipboard-target により、コピー元の要素IDを指定する。
補足
これを使う場合は、JavaScriptを以下のように変更する。
0042: <script type="text/javascript">
0043: document.addEventListener('DOMContentLoaded', function() {
0044: document.getElementById('copy_url').addEventListener('click', function() {
0045: var target = document.getElementById('url');
0046: var range = document.createRange();
0047: range.selectNode(target);
0048: window.getSelection().addRange(range);
0049: document.execCommand('copy');
0050: window.getSelection().removeAllRanges();
0051: range.detach();
0052: });
0053: document.getElementById('copy_title').addEventListener('click', function() {
0054: var target = document.getElementById('title');
0055: var range = document.createRange();
0056: range.selectNode(target);
0057: window.getSelection().addRange(range);
0058: document.execCommand('copy');
0059: window.getSelection().removeAllRanges();
0060: range.detach();
0061: });
0062: document.getElementById('copy_description').addEventListener('click', function() {
0063: var target = document.getElementById('description');
0064: var range = document.createRange();
0065: range.selectNode(target);
0066: window.getSelection().addRange(range);
0067: document.execCommand('copy');
0068: window.getSelection().removeAllRanges();
0069: range.detach();
0070: });
0071: });
0072: </script>
そこで今回は、ZeroClipboardというJavaScriptライブラリを使い、ブラウザに依存しないクリップボード処理を実装する。IE9以上、Chrome、Firefox、Safariでの動作を確認した。
なお、ZeroClipboardはjQuery とFlashを利用する。