Clever Geek Handbook

JavaScriptを使用してカットしてバッファーにコピーする

IE10から、 Document.execCommand（）メソッドを使用したCopyおよびCutコマンドのサポートが追加されました。 また、これらのメソッドはバージョン43以降のChromeで使用できます。



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



これは、バッファにコピーする対象を指定するためのプログラムテキストハイライト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) { //      var emailLink = document.querySelector('.js-emaillink'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try { // ,     ,    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'); } //   - :    // removeRange(range)    window.getSelection().removeAllRanges(); });


ここでは、 選択APIメソッドwindow.getSelection（）を使用して、ユーザーのクリップボードにコピーするリンク内のテキストをプログラムで選択します。 document.execCommand（）を呼び出した後、 window.getSelection（）。RemoveAllRanges（）を使用して選択を解除できます。

すべてがうまくいったことを確認したい場合は、document.execCommand（）関数によって返された結果を考慮することができます。 機能がサポートされていないか無効になっている場合、結果はfalseになります。 try ... catchでexecCommand（）を「ラップ」しました。 場合によっては 、「カット」コマンドと「コピー」コマンドがエラーを返すことがあります 。



「カット」コマンドは、テキストを削除し、このテキストをバッファに入れるテキスト入力フィールドに使用できます。



テキストエリアとボタンの使用： 

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


queryCommandSupported（）とqueryCommandEnabled（）の違いは、 ブラウザーで 「コピー」コマンドと「カット」コマンドをサポートできることですが、テキストが選択されていない場合は使用できません。 これは、テキストをプログラムで選択せずにコマンドを期待どおりに動作させたい場合、またはユーザーにメッセージを表示する場合に便利です。



ブラウザの互換性



IE 10以降、Chrome 43以降、Opera 29以降



Firefoxはこれらの機能をサポートしていますが、設定を変更する必要があります（ こちらをご覧ください ）（ 翻訳者のメモ ：長い間。 これがないと、Firefoxはエラーを返します。



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



既知の問題





More articles:


All Articles