JavaScript カット／コピー／ペーストされた際に処理を行う
カット・コピー・ペーストされた際に処理を行うには、copyイベントやpasteイベントを捕捉します。要素では、oncopyのように、「on」を付けたプロパティにイベントハンドラを設定できます。また、addEventListener()メソッドを使ってイベントリスナーで設定することもできます。
| イベント | 説明 |
|---|---|
| copy | コピーしたとき |
| beforecopy | コピーする前 |
| cut | カットしたとき |
| beforecut | カットする前 |
| pasete | ペーストしたとき |
| beforepaste | ペーストする前 |
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
//テキストフィールドの参照を変数に代入
var fld = document.getElementById("myFld");
//テキストフィールドにcopyイベントを割り当て
fld.addEventListener("copy", function(evt){
ele.innerHTML = "コピーしました。";
}, false);
//テキストフィールドにcutイベントを割り当て
fld.addEventListener("cut", function(evt){
ele.innerHTML = "カットしました。";
}, false);
//テキストフィールドにpasetイベントを割り当て
fld.addEventListener("paste", function(evt){
ele.innerHTML = "ペーストしました。";
}, false);
}, false);
</script>
<h1>コピー/カット/ペースト処理</h1>
<form>
<input type="text" value="sample" id="myFld"><br>
</form>
<output></output>
</body>テキストフィールドの内容をコピーすると、コピーしたことを示す文字が表示されます。
テキストフィールドの内容をカットすると、カットしたことを示す文字が表示されます。
テキストフィールドのペーストすると、ペーストしたことを示す文字が表示されます。
