Flashを用いずJavaScriptでコピー&カット機能を実装する
2015/11/02
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー&カット機能を実装できるらしい。以下に以前の記事とサンプルとソースをメモ。
■以前の記事
https://taitan916.info/blog/?p=419
■サンプル
http://sample.taitan916.info/cut_copy/
■ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html lang="ja"> <head> <meta charset="UTF-8"> <title>document.execCommandでカット&コピー</title> </head> <body> <textarea class="sample-text">サンプルテキスト</textarea> <button class="cut btn">カット</button> <button class="copy btn">コピー</button> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('.btn').click(function(){ var key = ( $(this).hasClass('cut') ) ? 'cut' : 'copy'; var text = document.querySelector('.sample-text'); text.select(); try{ var successful = document.execCommand(key); var msg = successful ? 'success!' : 'error!'; alert( msg ); }catch( err ){ console.log( err ); } }); }); </script> </body> </html> |
■その他
利用可能ブラウザはchrome42,firefox41,IE9,Opera29となっており、safariやスマホ端末は無理っぽい。詳細は以下の通り。
https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand#Browser_Compatibility
PCでの利用が前提のページでブラウザもある程度指定可能な、社内向けの管理画面とかで用いるのがよさそう。
関連記事
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...
-
-
javascriptでのエラーログ
PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...
-
-
JavaScriptで多次元連想配列
JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...
-
-
javascriptでゼロパティング
月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...
-
-
safariのみスクロール関連のイベントが発火しない
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
GoogleMapAPIで現在地を更新する方法
GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...
-
-
jQuery2.0がリリース
リリースされたとのこと。 http://blog.jquery.com/2013 ...
-
-
jQuery.browser～みたいなエラーが出た
jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...
-
-
imgタグとPHPでグラフ作成
プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...