切り取りとコピーのコマンド

IE10 以降で「cut」のサポートが追加されましたと「copy」コマンドを Document.execCommand() メソッドを呼び出します。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() プログラマティックに「selection」を設定してアンカーに、 ユーザーのクリップボードにコピーするのを試みています。document.execCommand() を呼び出した後、 選択を解除するには、 window.getSelection().removeAllRanges(): すべてが想定どおりに動作していることを確認するには、 document.execCommand(); のレスポンスコマンドが読み取れない場合は false が返されます。 異なります。execCommand() は try と catch でラップされており、 と「copy」エラーがスローされる場合がある いくつかあります

「カット」コマンドは、テキストを削除する場所のテキスト フィールドに使用できます。 クリップボードからアクセスできるようにします。

HTML でテキスト領域とボタンを使用する場合:

<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');
    }
});

queryCommandSupportedqueryCommandEnabled

document.execCommand() を呼び出す前に、この API が 使用してサポートされている document.queryCommandSupported() メソッドを呼び出します。上記の例では、次の要素に基づいてボタンの無効化状態を設定できます。 サポートします。

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

違いは、 document.queryCommandSupported() および document.queryCommandEnabled() カットとコピーはブラウザでサポートされても、テキストが選択されていない場合、テキストは有効になりません。この機能は、Google Chat に テキストの選択をプログラムで設定し、コマンドが確実に 想定どおりに機能しない場合は、ユーザーにメッセージが表示されます。

対応ブラウザ

IE 10 以降、Chrome 43 以降、Firefox 41 以降、Opera 29 以降は、これらのコマンドをサポートしています。

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

既知のバグ