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
シンプルかつ複数設置も容易なのですごく良い感じ。
関連記事
アコーディオンメニュー
簡単にアコーディオンメニューを導入したい時に 便利に使えたプラグイン。 ■サンプ ...
htmlタグが入った内容の文字を丸める
phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...
スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...
jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...