IE10 以降では、Document.execCommand() メソッドを介して「cut」コマンドと「copy」コマンドのサポートが追加されました。Chrome バージョン 43 以降では、これらのコマンドは Chrome でもサポートされています。
これらのコマンドのいずれかが実行されたときにブラウザで選択されたテキストは、ユーザーのクリップボードにカットまたはコピーされます。これにより、ユーザーはテキストの一部を選択してクリップボードにコピーする簡単な方法を提供できます。
これは、Selection API と組み合わせて、プログラムでテキストを選択してクリップボードにコピーする内容を決定する場合に非常に便利です。これについては、この記事の後半で詳しく説明します。
簡単な例
たとえば、メールアドレスをユーザーのクリップボードにコピーするボタンを追加しましょう。
HTML にメールアドレスを追加し、クリックされたときにコピーを開始するボタンを追加します。
<p>Email me at <a class="js-emaillink" href="mailto: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 アンカーからメールアドレスのテキストを選択し、コピー コマンドを実行してメールアドレスをユーザーのクリップボードに保存します。その後、メールアドレスの選択を解除して、ユーザーに選択が行われたことが見えないようにします。
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();
});
ここでは、Selection API のメソッド window.getSelection() を使用して、テキストの「選択」をプログラムでアンカーに設定します。このテキストは、ユーザーのクリップボードにコピーするテキストです。document.execCommand() を呼び出した後、window.getSelection().removeAllRanges() を呼び出して選択を削除できます。すべてが想定どおりに動作することを確認するには、document.execCommand のレスポンスを調べます。コマンドがサポートされていないか有効になっていない場合は false を返します。「cut」コマンドと「copy」コマンドは、いくつかのシナリオでエラーをスローする可能性があるため、execCommand() を try と catch でラップしています。
テキスト コンテンツを削除してクリップボードからアクセスできるようにするテキスト フィールドには、cut コマンドを使用できます。
HTML で textarea とボタンを使用する:
<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() メソッドを使用して、この API がサポートされていることを確認する必要があります。上記の例では、サポートに基づいてボタンの無効な状態を次のように設定できます。
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
document.queryCommandSupported() と document.queryCommandEnabled() の違いは、カットとコピーはブラウザでサポートされているが、現在選択されているテキストがない場合、これらのコマンドは有効にならない点です。これは、テキストの選択をプログラムで設定しておらず、コマンドが想定どおりに実行されるようにしたい場合や、実行されなかった場合にユーザーにメッセージを表示する場合に便利です。
対応ブラウザ
IE 10 以降、Chrome 43 以降、Firefox 41 以降、Opera 29 以降でこれらのコマンドがサポートされています。
Safari ではこれらのコマンドはサポートされていません。