JavaScriptをクリップボードにコピー/貼り付け：Googleはどのようにそれを解決しましたか？

Question

はい、この質問は何度も繰り返し尋ねられてきました.JavaScriptを使用してシステムクリップボードにコピーして貼り付ける方法は？私はこれまで部分的な解決策とハックしか見つけていませんでした。 過去に頻繁に尋ねられた理由は、まだ解決策がないということです。しかし、私は、Google Docsに実際にキーボードイベントとボタンの両方のソリューションが実際に存在することを知りました。それで、可能ですが、どうやってそれをしますか？ソフトウェアサラダの記事Accessing the System Clipboard with JavaScript – A Holy Grail?は、問題の概要を示しています（ただし、数年前です）。要するに

：

• あなたは、キーボードイベントのCTRL + X、Ctrl + Cを使用して作成されたデータと隠しテキストエリアのいずれかからテキストをコピーするには、Ctrl + V、または隠しフィールドに貼り付けたテキストをキャッチすることができます

• Flash経由で多少のハックやJavaアプレットを使用して、ユーザーの承認なしに何かをシステムクリップボードにコピーすることができます。

• IEの場合はclipboardData.setDataを使用し、他のブラウザの場合はexecCommandを使用することができます。これはユーザーの承認によります。

どのようにGoogleがクリップボードの問題に取り組んできたのでしょうか？

Answer 1

[注：この回答は書かれた時点で正確であり、OPの質問に正しく答えました。しかし、技術はそれ以来進化を遂げています。あなたのWebアプリケーションでコピーアンドペーストをサポートすることに興味がある場合は、このページの他の最新の回答をご覧ください。 — ruakh]

---

しかし、私はGoogleドキュメントが実際に両方のキーボードイベントだけでなく、ボタンになりました実用的なソリューションを持っていることがわかりました。

いいえ、そうではありません。あんまり。キーボードイベントの場合、Googleドキュメントは何もしません。それは単にブロックブラウザのデフォルトのコピー＆ペースト機能ではありません。そのため、ユーザーはGoogleドキュメントを手に入れることなく自由にコピーして貼り付けることができます。ボタンの場合、Googleドキュメントはシステムクリップボードをサポートしていませんが、Googleドキュメント内に完全に含まれる独自の「ウェブクリップボード」をサポートしています。ツールバーのボタンを使用して、コンピュータ上の別のプログラムに貼り付けるためのテキストをコピーしたり、コンピュータ上の別のプログラムからコピーしたテキストを貼り付けることはできません。

この詳細については、"Copying and pasting in Google Docs"を参照してください。 （それは開発者指向ではなくユーザー指向だが、サポートされているものとサポートされていないものを明確にしている。）

Answer 2

Googleは非常にシンプルだがクールな方法を使用している。 firebugを使うと、読み込まれるHTMLコードにサイズ1のテキスト領域があることを知ることができます.Google docは、ユーザーがテキストを選択してctrl + cを押すと、イベントをキャプチャし、ドキュメントコンテナで選択されたテキストをテキスト領域の値をそのコンテンツに設定します。テキスト領域をフォーカスして選択するよりもこれでctrl + cイベントが解放されます。しかし、今テキストはテキスト領域で選択されているので、イベントがリエレースされると、ブラウザはテキスト領域のテキストをコピーするので、コピーされたテキストを取得します。

Answer 3

私はその質問が長い間前に投稿されたことを知っていますそれで、多分誰かがそれを見いだすだろう。

実際、Googleではシステムのクリップボードも使用していますが、それはやや難解です。キーボードショートカットを使用する場合は、コピー/貼り付け/カットイベントを取得できます。ウィンドウ：

window.addEventListener('copy', function (ev) { 
    console.log('copy event'); 
    // you can set clipboard data here, e.g. 
    ev.clipboardData.setData('text/plain', 'some text pushed to clipboard'); 
    // you need to prevent default behaviour here, otherwise browser will overwrite your content with currently selected 
    ev.preventDefault(); 
}); 

キーボードショートカットのライブ例：あなたはネイティブせずにクリップボードのデータにアクセスできないため、コンテキストメニューに問題があるhttp://jsfiddle.net/tyk9U/

残念ながら、これはキーボードショートカットのための唯一の解決策であり、（信頼できます）コピー/カット/ペーストイベント。しかし、Googleは興味深いトリックをしています。あなたがcontenteditable要素のためのコマンドを実行することを可能にするAPI document.execCommand()があります。document.execCommand('copy')によってそれを引き起こすことができるコマンド 'コピー'があります。しかし、Chromeのコンソールでこれを試すと、falseが返されます。私はちょっと時間をかけて調査しましたが、Chrome拡張機能がインストールされていることが判明しました。「Googleドライブ」と呼ばれています（chrome：// apps /に移動し、そこに表示されます）。 comとdocs.google.com。文書またはスプレッドシートを開き、コンソールdocument.execCommand('copy')を入力してください - trueを返します。拡張機能をアンインストールすると、コンテキストメニューからクリップボード操作を使用することができなくなります。

あなたは非常に単純なマニフェストファイル（ここでは詳細https://developer.chrome.com/apps/first_app）を自分のためにこのようなアプリケーションを作成することができます：ここ

{ 
    "manifest_version": 2, 
    "name": "App name", 
    "description": "App description", 
    "version": "1.0", 
    "app": { 
     "urls": [ 
      "http://your.app.url.here/" 
     ], 
     "launch": { 
      "web_url": "http://your.app.url.here/" 
     } 
    }, 
    "icons": { 
     "128": "x-128.png" 
    }, 
    "permissions": [ 
     "clipboardRead", 
     "clipboardWrite" 
    ] 
} 

「権限」フィールドには、クリップボード操作を可能にします。

これを有効にすると、document.execCommand('copy')を実行すると動作します（trueが返されます）。しかし、これはすべてではありません - document.execCommand('copy')クロムのトリガーイベントをコピーし、キーボードクリップボードのショートカットをキャッチするために使用されるのと同じコードでそれをキャッチすることができます。これはGoogleが現在行っていることです。

もちろん、この説明はChromeでのみ有効です。

Answer 4

このスレッドに他のユーザーが投稿したことに加えて、キーボードショートカットのアプローチ（Mac OS XではCtrl + CまたはCMD + C）とトリガーとなるカスタムボタンのアプローチコピーアクション。

全デモはここで見つけることができます：私はこのデモを作成しようとしているときに非常に便利はMateusz Wの答えを見つけましたが、彼は少し異なる振る舞いとして異なるデータ型を使用してIEの対価のサポートに入れていないhttp://jsfiddle.net/rve7d/

第1のパラメータ。

if(window.clipboardData) { 
    // use just 'Text' or 'Url' as a first param otherwise strange exception is thrown 
    window.clipboardData.setData('Text', 'Text that will be copied to CB');   
} else if(ev.originalEvent.clipboardData) { 
    ev.originalEvent.clipboardData.setData('text/plain', 'Text that will be copied to CB');  
} else { 
    alert('Clipboard Data are not supported in this browser. Sorry.'); 
} 

PS：私は私のソリューションは、主にその解決に準拠して、当社のカスタムスプレッドシートビューコンポーネントのこの機能を必要とし、途中でGoogleスプレッドシートのソースコードを分析しました。

Answer 5

<p>COPY : </p> 
<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" value="clipboard" >clipboard</button></p> 
<textarea rows="10" cols = "12"></textarea> 
<p>CUT: </p> 
<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p> 
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p> 
<script> 
//copy clipboard 
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(); 
}); 
//cut 
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'); 
    } 
}); 
</script>