copyイベント,cutイベント,pasteイベント：コピー、カット、ペーストを行ったとき

copy イベントはブラウザ上でコピー操作を行ったときに発生するイベントです。 cut イベントはブラウザ上でカット操作を行ったときに発生するイベントです。また paste イベントはブラウザ上でペースト操作を行ったときに発生するイベントです。 oncopy 属性(または oncut 属性や onpaste 属性)や oncopy プロパティ(または oncut プロパティや onpaste プロパティ)に対してイベントハンドラを設定したり、 addEventListener メソッドの引数として copy、 cut または paste を指定してイベントリスナーを登録できます。ここでは JavaScript を使って copy イベント、 cut イベントまたは paste イベントが発生した場合の処理を記述する方法について解説します。

(Last modified: 2023年02月03日)

copyイベント、cutイベント、pasteイベントの使い方
mouseenterイベントとmouseoverイベントの違い

copyイベント、cutイベント、pasteイベントの使い方

copy イベントはブラウザ上でコピー操作を行ったに発生するイベントです。イベントは Element オブジェクトで発生します。

イベントの種類 : ClipboardEvent
バブリングの可否 : 不可
キャンセルの可否 : 不可

cut イベントはブラウザ上でカット操作(切り取り操作)を行ったに発生するイベントです。イベントは Element オブジェクトで発生します。

イベントの種類 : ClipboardEvent
バブリングの可否 : 不可
キャンセルの可否 : 不可

paste イベントはブラウザ上でペースト操作(貼り付け操作)を行ったに発生するイベントです。イベントは Element オブジェクトで発生します。

イベントの種類 : ClipboardEvent
バブリングの可否 : 不可
キャンセルの可否 : 不可

※ バブリングについては「イベントの伝搬(キャプチャリングとバブリング)」、キャンセルについては「イベントに対するデフォルトの動作をキャンセルする」を参照されてください。

要素の属性値にイベントハンドラを登録する場合は oncopy 属性、 oncut 属性、または onpaste 属性を使用します。

oncopy 属性 oncut 属性 onpaste 属性

<textarea oncopy="copy()" oncut="cut()" onpaste="paste()">
</textarea>

<script>
function copy(){
    console.log('Copy');
}
</script>

<script>
function cut(){
    console.log('Cut');
}
</script>

<script>
function paste(){
    console.log('Paste');
}
</script>

DOM を使って取得した要素のプロパティにイベントハンドラを登録する場合は oncopy プロパティ、 oncut プロパティまたは onpaste プロパティを使用します。プロパティを使用する場合は、無名関数またはアロー関数式を使って記述することもできます。(詳しくは「イベントハンドラを無名関数やアロー関数を使って記述する」を参照されてください)。

oncopy プロパティ oncut プロパティ onpaste プロパティ

<textarea id="memo"></textarea>

<script>
function copy(){
    console.log('Copy');
}

function cut(){
    console.log('Cut');
}

function paste(){
    console.log('Paste');
}

let memoarea = document.getElementById('memo');
memoarea.oncopy = copy;
memoarea.oncut = cut;
memoarea.onpaste = paste;
</script>

addEventListener メソッドを使ってイベントリスナーを登録する場合は、 1 番目の引数に 'copy' 、 'cut' または 'paste' を指定してください。 addEventListener メソッドを使用する場合は、無名関数またはアロー関数式を使って記述することもできます。(詳しくは「addEventListenerメソッドを使ってイベントリスナーを登録する」を参照されてください)。

addEventListener メソッド

<textarea id="memo"></textarea>

<script>
function copy(){
    console.log('Copy');
}

function cut(){
    console.log('Cut');
}

function paste(){
    console.log('Paste');
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

要素に対してプロパティへイベントハンドラを登録した場合と、 addEventListener メソッドを使ってイベントリスナーを登録した場合、イベントが発生してイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる Event オブジェクトが渡されてきます。 copy イベント、 cut イベントおよび paste イベントの場合は Event オブジェクトを継承した ClipboardEvent オブジェクトが渡されてきます。

<textarea id="memo"></textarea>

<script>
function copy(event){
    console.log(event);
}

function cut(event){
    console.log(event);
}

function paste(event){
    console.log(event);
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

イベントハンドラやイベントリスナーの中で渡されてきた ClipboardEvent オブジェクトのプロパティなどを参照することで、発生したイベントに関する情報を参照できます。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>

<style type="text/css">
textarea{
width:500px;
height:100px;
}
</style>

</head>
<body>

<p>サンプルページです。</p>

<textarea id="memo"></textarea>

<script>
function copy(event){
    alert('Copyは禁止です')
    event.preventDefault();
}

function cut(event){
    alert('Cutは禁止です')
    event.preventDefault();
}

function paste(event){
    alert('Pasteは禁止です')
    event.preventDefault();
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

</body>
</html>

画面に表示されている textarea 要素で Copy 、 Cut、 Paste の操作をそれぞれ preventDefault メソッドを使ってデフォルトの動作を無効にしています。

Ctrl + c キーを使ってテキストエリアに入力されたテキストをコピーしようとすると、「Copyは禁止です」というアラートを表示します。

copyイベント,cutイベント,pasteイベント：コピー、カット、ペーストを行ったとき(1)