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

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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

最後に少し補足

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

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

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

ここまでのまとめ

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください