jQueryでボタンをクリックしてクリップボードにコピー
2015/11/02
■2015/11/01追記
以下記事でライブラリとか無しで同様の機能がつけられる。
https://taitan916.info/blog/?p=2469
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で新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...
-
jQueryプラグインの作成
面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...
-
jQueryで対象の要素をまとめて親要素で囲む方法
あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...