勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

2015/11/01 2015/11/02

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

■以前の記事

https://taitan916.info/blog/?p=419

■サンプル

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>

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での利用が前提のページでブラウザもある程度指定可能な、社内向けの管理画面とかで用いるのがよさそう。

- JavaScript, jQuery

関連記事

: 要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

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

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

: Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

: 日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。・日付入力のテキストフォームにカレンダープラ ...

: bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクト ...

: jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

: jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

: テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、ユーザー用でも管理用でも使えそう。 ...

: GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

: jQueryでセレクトメニューにcheckedをつける

セレクトメニュー(セレクトボックス)で特定の項目をデフォルトで選択しておきたかっ ...

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

新着記事

: ACFでセレクトメニューを動的に生成

WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...

: 八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

: サーバ内でバージョン確認方法のまとめ

OSやApacheのバージョンを確認する際にいつもググっていたので、調べやすいよ ...

: CentOS6.10に無料SSL(Let's Encrypt)を導入

以前にもVPSにLet's Encryptを導入するという記事を書いたが、テスト ...

: VPSにMovableTypeをインストール

VPSにMovableTypeをインストールしたかった。バージョン7系はインスト ...

カテゴリー
- Ajax
- CMS
- CSS
- Flash
- htaccess
- HTML
- JavaScript
- jQuery
- memcached
- MovableType
- MySQL
- MySQLi
- PHP
- redis
- Ruby
- SEO
- SQLite
- VPS
- WordPress
- その他
- アプリ
- エラー管理
- サーバー
- ドメイン
- ブラウザ
- モバイル
- 正規表現
- 画像