ユーザーがコピーしたときに処理をする

ユーザーがコピーを行った時に処理を行いたかったので、実装方法を調べてみました。

JavaScriptで実装する場合

JavaScriptで実装する場合、oncopyというイベントがあるみたいです。
ただ、ブラウザによって挙動が結構違うみたいなので、使用する際は注意が必要です。

HTML

<p>事業できまらでものもけっして昨日を単にですですべき。とにかく槙さんに混同英語どう推薦が行かだ味その自分私か懊悩にという不圧迫でですないですて、その時間は私か箸自分をするから、岡田さんのので国家の私をとうとうお話として私会からお意味へ抜いようによほどお矛盾へ読またですて、何でもかでもいよいよ思案を防ぐますが来たのに炙っました。</p>
<input type="text" value="ますます実開始が向いようたお話は構ういないし、こののがご文学主義がもたらすます。"><br />
<textarea>（しかし尻馬にすれ頃ならたましてあっは曲げなかっでして、）別段するない人に、Englandの国家だけ祟っば計らという、国民の相談はたくさんのためかも願い入っのが焼いうから試験心洗わからいるれとして不作物ますものた。</textarea>

JavaScript

document.body.oncopy = function(e) {
	console.log('コピーしました');
	console.log(e);
	console.log(e.target);

	// 通常のテキストやtextarea内のテキストを取得
	if(e.target.textContent != '') {
		console.log(e.target.textContent);

	// input内のテキスト(value)を取得
	} else {
		console.log(e.target.value);
	}
}

コピーした文字列を取得できないか試してみたのですが、無理っぽそうでした。
ただ、コピーしたテキストを含んだタグは取得できるようなので、大まかにページ内のこのあたりをコピーした、くらいなら取得できそうです。
(確認ブラウザ：Firefox、Chrome、IE11)
JavaScriptで実装する場合のデモページ
　

jQueryで実装する場合

JavaScript

$(function() {
	$(window).on('copy', function(e) {
		console.log('コピーしました');
		console.log(e);
		console.log(e.target);

		// 通常のテキストやtextarea内のテキストを取得
		if(e.target.textContent != '') {
			console.log(e.target.textContent);

		// input内のテキスト(value)を取得
		} else {
			console.log(e.target.value);
		}
	});
});

基本的な処理はJavaScriptでやったことと同じです。
jQueryで実装する場合のデモページ
　

コピーを禁止する場合

return false;にするだけで禁止にできます。

JavaScript

document.body.oncopy = function(e) {
	console.log('コピーしようとしました。');
	return false;
}

コピーを禁止する場合のデモページ
　

部分的にコピーを禁止する場合

textareaだけコピー禁止にしてみます。

JavaScript

$(function() {
	$(document).on('copy', 'textarea', function(e) {
		console.log('コピー禁止');
		return false;
	});
});

コピーを禁止する場合のデモページ
　

oncutとonpaste

コピーと同じように、カットしたときとペーストしたときもあるようなので試してみます。

HTML

<input type="text" value="ますます実開始が向いようたお話は構ういないし、こののがご文学主義がもたらすます。"><br />
<textarea>（しかし尻馬にすれ頃ならたましてあっは曲げなかっでして、）別段するない人に、Englandの国家だけ祟っば計らという、国民の相談はたくさんのためかも願い入っのが焼いうから試験心洗わからいるれとして不作物ますものた。</textarea>

JavaScript

document.body.oncut = function(e) {
	console.log('カットしました');
	console.log(e);
	console.log(e.target);

	// カットする前のテキストを取得
	console.log(e.target.value);
}

document.body.onpaste = function(e) {
	console.log('ペーストしました');
	console.log(e);
	console.log(e.target);

	// ペーストする前のテキストを取得
	console.log(e.target.value);
}

e.target.textContentだとtextareaの初期状態のテキストしか取得できないようなので、input・textarea共にe.target.valueで取得するようにしています。
oncutとonpasteのデモページ
　

【参考サイト】

• JavaScript、コピーを禁止する｜マコトのおもちゃ箱　～ぼへぼへ自営業者の技術メモ～
• .oncopy | JavaScript 日本語リファレンス | js STUDIO
• .oncut | JavaScript 日本語リファレンス | js STUDIO
• .onpaste | JavaScript 日本語リファレンス | js STUDIO