10年以上前

ユーザーのコピペ、カットを自由に操作できる「Clipboard API」

OSに標準搭載されているクリップボードをJavaScriptで操作する方法を紹介します。この「Clipboard API」の使い道としては、ウェブサイトのコピペ対策が挙げられます。特にブログやSNSといった、ユーザーがテキストエリアに直接入力するようなサービスで活用できそうです。「Windows Word」でコピペ箇所を自動記録する仕様を見たことがあると思いますが、これと似た機能をウェブサイトにも実装することができるようになります。

コピー、ペースト、カットイベントを設定しよう

コピー/貼り付け/切り取りを実行してみてください。

クリップボードのイベント


コピー、ペースト、切り取りの操作をしてみてください。

document.addEventListener('beforecopy', function(){
document.getElementsByTagName('p')[0].innerHTML = '選択した文字列をコピーします。';
});

document.addEventListener('beforecut', function(){
document.getElementsByTagName('p')[0].innerHTML = '選択した文字列を切り取ります。';
});

document.addEventListener('beforepaste', function(){
document.getElementsByTagName('p')[0].innerHTML = '選択した文字列を貼り付けます。';
}); 




      

  
各イベントの設定方法は様々ですが、サンプルではaddEventListenerを使っています。なお、before…イベントはブラウザによってはうまく動作しない場合がありますので、対応状況を確認してください。




      

クリップボードの文字列を操作しよう


      

  
以下のサンプルはユーザーが任意の文字列をコピーしようとしたとき、代わりに「Hello World!」という文字列をクリップボードに格納しています。これはコピペ対策として活用できそうです。




      

  
  
クリップボードの操作


このエリアの文字列をコピペしてみてください。「Hello World!」がペーストされます。Windows Wordでは赤太字でペーストされます。



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

    e.clipboardData.setData('text/plain', 'Hello, world!');

    e.clipboardData.setData('text/html', '<b style="color:red;">Hello, world!</b>');

    e.preventDefault();

});


  



      

  
JSのcopyイベントはクリップボードに文字列がコピーされる直前に発火することを押さえた上で以下お読みください。

引数eに格納されているのはクリップボード情報です。コピーした文字列はe.clipboardDataに格納されるので、setData()でHello World!を格納しています。MIMETYPEが2つ設定されていますが、plainは通常の文字列で、htmlの方はその文字列のタグ情報まで格納します。例えば「Windows Word」やブログ作成ページのリッチテキストエディタにペーストしてみてください。赤太字のHello World!がペーストされたと思います。

最後にユーザーがコピーした文字列は4行目のpreventDefault()でキャンセルします。




              

          
          
          
        



参考


      

  
Clipboard API – W3C

getData/setData/clearData – W3C

対応状況 – Can I use…





  

    

      

      

      

    

  


  

  

    
  


  

    
執筆者

    

    

      
AnTytle

      

    

    

  








  
他の記事

  





  
オススメ