Flashを用いずJavaScriptでコピー&カット機能を実装する方法
2024/01/13
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー&カット機能を実装できるらしい。以下に以前の記事とサンプルとソースをメモ。
以前の記事
https://taitan916.info/blog/?p=419
サンプル
https://taitan916.info/sample/cut_copy/
ソース
<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="https://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での利用が前提のページでブラウザもある程度指定可能な、社内向けの管理画面とかで用いるのがよさそう。
関連記事
-
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
formのpasswordとtextをjQueryで切り替える方法
formでtype="password"を指定していると内容を入力した際に「●● ...