HTML
JavaScript
Chrome

Chrome 43からcutおよびcopyコマンドが使えます

More than 3 years have passed since last update.

Chrome 43から、選択されたテキストをクリップボードにコピーしたり切り取ったりする機能が利用可能になります。Chrome拡張機能からは前から使うことができていましたが、Chrome 43からは普通のWebページからも利用することが可能です。HTML5Rockの更新情報にてアナウンスされていましたので、早速日本語訳してみました。ぜひご活用ください。

原文: http://updates.html5rocks.com/2015/04/cut-and-copy-commands

Cut and Copy Commands

IE10やそれ以上のバージョンは、Document.execCommand()メソッド( https://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FDocument%2FexecCommand&sa=D&sntz=1&usg=AFQjCNGXS6fCPqMRGr1_NECYZuxIOyVURg )を通じて'cut'および'copy'コマンドのサポートを追加していました。Chromeバージョン43では、それらのコマンドがChromeでもサポートされます。

それらのコマンドのうち一つが実行された際にブラウザ内で選択されていたテキストは、ユーザのクリップボードに切り取りまたはコピーされるでしょう。これにより、テキストの一部分を選択してクリップボードにコピーするための単純な方法をユーザに提供することができるようになります。

これは、クリップボードにコピーされる対象を決定するためにプログラム的にテキストを選択するためのSelection API( https://developer.mozilla.org/en-US/docs/Web/API/Selection )と組み合わせることで、更に使いやすくなります。

単純な例

目的を示す例として、ユーザのクリップボードにEmailアドレスをコピーするボタンを追加してみましょう。

私たちは、クリックされた際にコピーを指示するためのボタンを持つHTMLの中にEmailアドレスを追加します。

<p>Email me at <a class="js-emaillink" href="matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

その後JavaScriptにおいては、js-emaillinkアンカーからEmailアドレスのテキストを選択し、Emailアドレスをユーザのクリップボードに入れるためにコピーコマンドを実行する処理を行い、その後ユーザが選択されたことを認識しないようにEmailアドレスの選択を解除する処理について、ボタンのクリックイベントハンドラに追加したいと思います。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');  
copyEmailBtn.addEventListener('click', function(event) {  
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');  
  var range = document.createRange();  
  range.selectNode(emailLink);  
  window.getSelection().addRange(range);  

  try {  
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  

  // Remove the selections - NOTE: Should use   
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();  
});

私たちがここでしていることは、ユーザのクリップボードにコピーしたいテキストを持つアンカーに対して、テキストの'select'をプログラム的にセットするために、Selection API ( https://developer.mozilla.org/en-US/docs/Web/API/Selection )、window.getSelection() ( https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection )メソッドを使っています。document.execCommand()の呼び出し後に、window.getSelection().removeAllRanges() ( https://developer.mozilla.org/en-US/docs/Web/API/Selection/removeAllRanges )の呼び出しによって、選択を解除することができます。

もしあなたが期待した通りに何もかも動作したかどうか確認したい場合は、document.execCommand()のレスポンスを検査することができます。もしコマンドがサポートされていない、または利用可能ではない場合は、falseが返却されます。'cut'や'copy'コマンドは、いくつかのシナリオでエラーを投げることがある( https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-copy-command )ので、try-catchでexecCommand()を包んでいます。

'cut'コマンドは、テキストの内容を削除してそれをクリップボードにアクセスさせたいテキストフィールドに利用することが可能です。

HTML内でtextareaやbuttonを利用します:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

そして内容を切り取るには以下のように行えば良いです。

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {  
  var cutTextarea = document.querySelector('.js-cuttextarea');  
  cutTextarea.select();

  try {  
    var successful = document.execCommand('cut');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Cutting text command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to cut');  
  }  
});

queryCommandSupportedとqueryCommandEnabled

document.execCommand()呼び出しの前に、あなたはdocument.queryCommandSupported()メソッド( https://developer.mozilla.org/en-US/docs/Web/API/Document/queryCommandSupported )を使って、このAPIがサポートされていることを保証すべきです。上記の例において、以下のようにしてサポート状況に応じてボタンを使用できないようにセットすることができます:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

document.queryCommandSupported()( https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#querycommandsupported() )とdocument.queryCommandEnabled() ( https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#querycommandenabled() )の違いは、切り取りやコピーがブラウザによってサポートされていたとしても、もしテキストがその時に選択されていなかった場合に、それらが可能ではないかどうかです。これは、あなたがプログラム的にテキストの選択をセットしていない場合に、コマンドが期待した通り機能することを保証したい、そうでなければユーザにメッセージを表示したい、という場面で有益です。

ブラウザサポート

IE 10以上、Chrome 43以上、そしてOpera 29以上がこれらのコマンドをサポートしています。

Firefoxもこれをサポートしていますが、設定の変更(ここの切り取りとコピーコマンドを参照: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand )が必要です。設定を行わなかった場合は、Firefoxはエラーを投げます。

Safariはこれらのコマンドをサポートしていません。

既知のバグ

  • ユーザのインタラクションがあるまで、切り取りやコピーのためのqueryCommandSupported()の呼び出しは常にfalseを返します( http://crbug.com/476508 )。これは、実際にそれをサポートしないブラウザであなたがUIを使用不可にするのを防ぎます。
  • DevToolsからのqueryCommandSupported()呼び出しは、常にfalseを返すでしょう。( http://crbug.com/475868
  • あなたがプログラム的にテキストを選択する際は、切り取りのみが機能します。( http://crbug.com/476848