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での利用が前提のページでブラウザもある程度指定可能な、社内向けの管理画面とかで用いるのがよさそう。
関連記事
-
-
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...
-
-
jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法
jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...