JavaScript・jQueryで切り取りイベントを追加する方法とコード例

「テキストエリアで切り取りされたら何か処理をしたい」
「ページ全体で切り取り（カット）イベントを監視したい」

そういう場合はクリップボードAPIを使えば切り取りイベントを登録できます。

ここではその切り取りイベントの登録の仕方やコード例についてまとめました。

このページの目次

切り取りイベントの追加方法はとても簡単
切り取り後のテキストを取得するときは要注意！
補足 : クリップボードのコピーや貼り付けを監視するには・・
ここまでのまとめ

切り取りイベントの追加方法はとても簡単

JavaScriptにはイベントタイプが定義されていて、それをイベント登録用のメソッドに渡しますよね。例えばよく使うイベントタイプは 'click' とか 'keydown' とか 'focus' とか・・・

切り取りの場合だとイベントタイプは 'cut' を使います。

例えば次は純粋なJavaScriptで切り取りイベントを監視しているコード例

document.addEventListener('cut', function (e) {
  console.log('カットイベント発生');
});

document.addEventListener('cut', function (e) {

console.log('カットイベント発生');

});

このコードだと document 全体に対して切り取りイベントを監視し、もしどこかで切り取りが起きれば「カットイベント発生」とコンソールに表示してるだけです。

もちろんjQueryを使っている場合でもonメソッドとかbindメソッドを使えば同じことができます。

例えばbindメソッドを使って切り取りイベントを監視するなら次のコード

$(document).bind('cut', function(e){
  console.log('カットイベント発生');
});

$(document).bind('cut', function(e){

console.log('カットイベント発生');

});

イベントタイプに 'cut' を渡せばいいだけで普通のイベント登録と全く変わりません。

あと上２つの例だとドキュメント全体で切り取りイベントを監視してますが、一部の要素だけで切り取りイベントを検知することもできます。

例えば次がテキストエリアのみで切り取りを検知するjQueryコード例

$('textarea').on('cut', function(e){
  console.log('カットイベント発生');
});

$('textarea').on('cut', function(e){

console.log('カットイベント発生');

});

こうすればテキストエリアで切り取りが起きた場合のみコールバックが実行されます。

ただし document と違い、動的に追加される要素（この例だとテキストエリア）はbindメソッドよりもonメソッドを使った方がバグの温床になりにくいです。

参考記事 : jQueryのbindメソッドとonメソッドの違いについて

以上が切り取りイベントを処理する方法

切り取りの検知だけならカットイベントの追加でできるから難しくありません。

切り取り後のテキストを取得するときは要注意！

この切り取りイベントには１つ注意点があります。

それはコールバック関数内で直に切り取り後のテキストを取得できないということ。もし直に取得しようとすると切り取り前のテキストが返ってきてしまうので要注意

例えばjQueryで次のようなコードを書いたとしましょう。

$('textarea').on('cut', function(e){
  /** テキストエリアの内容を表示 */
  console.log($(this).val());
});

$('textarea').on('cut', function(e){

/** テキストエリアの内容を表示 */

console.log($(this).val());

});

切り取りが起きた後にそのテキストエリアの内容をコンソール表示しているコード例です。

普通の感覚だとコンソールには切り取り後のテキストエリアの内容が表示されると思ってしまいますよね。ですが実際に表示されるのは切り取り前の内容になってしまいます。

なので切り取り後の内容を取得するなら次のコード例みたいな工夫が必要です。

$('textarea').on('cut', function(e){
  /** テキストエリアの内容を表示 */
  var self = $(this);
  setTimeout(function(){
    if (self.val()) { 
      console.log(self.val());
    }
  },0);
});

$('textarea').on('cut', function(e){

/** テキストエリアの内容を表示 */

var self = $(this);

setTimeout(function(){

if (self.val()) {

console.log(self.val());

}

},0);

});

このコードだと setTimeout 内で遅延させてからテキストエリアの内容を取得してます。

遅延時間は０秒（単位的には０ミリ秒）で構いません。とりあえず遅延処理をはさんでおけば正常に切り取り後のテキストが取得できるみたいです。

ちなみに setTimeout を使った場合はコールバック内で $(this) が使えないことにも注意。上コードみたいに外側のコールバック内で self のような変数を作る必要があります。

補足 : クリップボードのコピーや貼り付けを監視するには・・

最後に少し補足

ここまでクリップボードAPIの切り取りイベントについて解説してきました。切り取りがあるということは当然コピーとか貼り付けイベントも監視できます。

そのやり方はそれぞれ次記事でまとめたのでご覧ください。

PisukeCode - Web開発まとめ

JavaScriptでクリップボードのコピーを取得・書き換えする方法

https://pisuke-code.com/javascript-clipboard-copy-event

ブラウザでコピーされたテキストはJavaScript側で取得することができます。またある方法を使うことでクリップボードの内容を書き換えることも可能です。ここではそのやり方やクリップボードの取得・書き換えのコード例についてまとめました。クリップボードのコピー検知には copy イベントを使うJavaScriptではaddEventListenerメソッドに対して色々なイベントタイプを渡しますよね。有名なイベントなら 'click' とか 'hover' とか 'mousedown' とか・・・その中でクリップボードのコピーを検知する...

PisukeCode - Web開発まとめ

JavaScript・jQueryでクリップボードの貼り付けを検知する方法

https://pisuke-code.com/javascript-clipboard-paste-event

「ページ全体で貼り付け（ペースト）イベントを監視したい」「テキストエリアに貼り付けされたテキストの内容を知りたい」そういう場合はクリップボードの監視をすれば貼り付けテキストの取得が可能です。ここではJavaScript・jQueryそれぞれで貼り付けを検知＆取得する方法をまとめました。JavaScriptで貼り付けイベントを監視するには初めは純粋なJSで貼り付けイベントを感知する方法についてそのやり方は簡単で'paste' というイベントタイプをaddEventListenerメソッドに渡すだけでOKです。例えば次が貼り付けされ...

使い方だけでなくコード例とか使用時の注意点についても解説したので、クリップボードAPIを使う時に役立つはずです。

ここまでのまとめ

ここまでの内容を簡単にまとめると次の通り

切り取りイベントは 'cut' を使う
このイベントタイプを addEventListener とか on とか bind などのメソッドに渡せばOK。切り取りが起こる直前にコールバックが実行される
切り取りテキストの取得に注意
コールバック内で切り取り後のテキストを取得する場合は setTimeout などを使って遅延させてから取得する必要あり。そうしないと切り取り前の内容になってしまう。

以上クリップボードAPIの切り取りイベントについてでした。ここまでで解説したように切り取り後のテキストを取得する場合は少し注意が必要です。