Flashを用いずJavaScriptでコピー&カット機能を実装する

2015/11/01 2015/11/02

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー&カット機能を実装できるらしい。以下に以前の記事とサンプルとソースをメモ。

■以前の記事

■サンプル

http://sample.taitan916.info/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>

<head>

<title>document.execCommandでカット&コピー</title>

</head>

<body>

<textarea class="sample-text">サンプルテキスト</textarea>

$(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, jQuery

: jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

: jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

: クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

: classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

: jQueryでドロワーメニューの作成

■やりたかった事スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

: jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと右から左にコンテンツを ...

: マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

: javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

: 要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

: リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

PREV: PHPのログイン認証をPEAR::Authで実装する
NEXT: 数種類のクリック広告をランダムで表示させる

Flashを用いずJavaScriptでコピー&カット機能を実装する

関連記事