IEやChromeでクリップボードにコピーを実現するにはZeroClipboard

javascript

JavaScriptで、クリップボード操作するのは、IEでは簡単なのですが、その他のブラウザでは実現困難です。そこで、Flashのクリップボード操作機能を用いて実現してしまおうという代物です。

ZeroClipboard

ZeroClipboard.jsとZeroClipboard.swfをjsというディレクトリに入れてるという前提

<script language="JavaScript" type="text/javascript" src="./js/ZeroClipboard.js"></script>
<script language="JavaScript" type="text/javascript" >
window.onload = function(){
　ZeroClipboard.setMoviePath("./js/ZeroClipboard.swf");
}
</script>
<script language="JavaScript" type="text/javascript">
<!--
// ZeroClipboardを利用
function clipSetBtn(id, text) {
	var clip = new ZeroClipboard.Client();
	clip.setText(text);
	clip.glue(id);
}

//-->
</script>

...

<!--- ループで回して$idと$nameに入ってくる値をテーブル表示。それぞれをクリップボードにコピーするボタンをつけてるというイメージ -->

<td align="left">
<input type="button" id="button$id" value="Copy" onmouseover="clipSetBtn('button$id','$id');" />$id</td>

<td align="left">
<input type="button" id="name$id" value="Copy"　onmouseover="clipSetBtn('name$id','$name');" />$name</td>

でもこれだとボタンをクリックしてもボタンが押されるような感じにならなくなったのでちょっと困ったが、まぁいいや。


ネタ元