JSで今日は知識にあなたと一緒にクリップボードの内容を共有するのでコピーします。
1つの実装機能ペーストボード
クリップボードを使用することは必要不可欠なスキルです。農業のコードが知っておくべきとおり、タブは、Ctrl / Cmdを+ Aは、Ctrl / Cmdを+ CとCtrl / Cmdを+ Vショートカットキーを貼り付け、オートフォーカス、コピーされています。
平均的なユーザーはあまり簡単かもしれません。ユーザーはクリップボードが（他に）優れたアイコンタクトを持っているか、すぐに反応する人が何であるかを知っている場合でも、他のケースでは、彼らが望む正確なテキストをハイライトすることは困難です。ユーザーがキーボードショートカットを知らない場合は、隠された[編集]メニュー、または右クリックメニューが使用されることはありません表示されていないか、オプションの長押しタッチスクリーンポップアップメニューを知らない、彼はおそらく気づい複製ではありません。
私たちはあなたを助けるために、「クリップボードにコピー」ボタンを提供すべきか？この機能は、さらにショートカットユーザーの経験がある人のための、有用なはずです。
クリップボードのセキュリティについて
数年前に、ブラウザが直接クリップボードを使用することはできません。開発者には、Flashで実装する必要がありました。
取るに足りないように見えるが、ブラウザは自由に何が起こるか、コンテンツを表示および操作できるかどうか想像してクリップボード。（サードパーティのスクリプトを含む）JSスクリプトがクリップボードの情報のテキスト、およびパスワード、機密情報を表示しても、リモートサーバに文書全体を送信することができます。
リミテッドは現在、以下の制限が、基本的な機能をクリップボード：
ほとんどのブラウザはSafariのを除いて、クリップボードをサポートしています。（注釈、Safariが既にサポートされている）
支持体は、ブラウザに依存し、いくつかの機能が不完全であるか、または問題がある変化します。
イベントは、マウスをクリックするか、キーボードを押すなど、ユーザによって開始されなければなりません。スクリプトは自由にクリップボードにアクセスすることはできません。
document.execCommand（）
このメソッドは、クリップボードへの鍵である、それはパラメータの3種類を貼り付け、切り取り、コピーを渡すことができます。最も一般的に使用されるdocument.execCommand（「コピー」）が導入を始めました。
使用する前に、我々は、ブラウザがサポートするコマンドをコピーするかどうかを確認する必要があります;またはdocument.queryCommandEnabled（「コピー」）; document.queryCommandSupported（「コピー」）を、これらの2つの方法と同様の効果を。
しかし、ChromeでChromeは名前のコピーの使用をサポートしていますが、二つの方法がfalseを返すものの。だから、try-catchブロック内のコードのパケットをチェックすることをお勧めします。
次に、我々は、ユーザーがそれが何であるかをコピーできるようにする必要がありますか？あなたは、テキストをハイライト表示しなければならない、すべてのブラウザは、テキスト入力とテキストエリア内のテキストを選択するための選択（）メソッドのために用意されています。次のようにFirefoxとクローム/オペラは、任意の要素からテキストを選択することができますdocument.createRangeメソッドをサポートしていますが。
// select text in
#myelement node
var
myelement = document.getElementById('#myelement'),
range = document.createRange();
range.selectNode(myelement);
window.getSelection().addRange(range);
しかし、IE /エッジはサポートしていません。
clipboard.jsは、
あなたがより堅牢なクロスブラウザのクリップボードメソッドの独自の実装にはしたくない場合は、その後clipboard.jsはあなたを助けることができます。：そのようH5データプロパティとして設定オプションには、いくつかの方法がありますが、セットバインディングのターゲットは、次のような要素と要素をトリガ
<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>
自分が達成し
、部分的にのみ、以下の機能を実装する場合clipboard.jsサイズのみ2Kbのを、我々は、コードの20行で達成することができます：
フォーム要素は、部分的にしか複製することができます
それは、ブラウザをサポートしていない場合（はい、Safariのことを意味していること）（注釈は、サファリは既にサポートされている）は、選択したテキスト、およびプロンプトはCtrl / Cmdを+ C.へのユーザーを強調
clipboard.js（すなわち#website）の要素をコピーすることを指し、データの属性データ-copytargetを持っている方法を、トリガするためのボタンを作成したいと同様
<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
さて、解析データcopytargetコンテンツの属性に使用される関数の関数式のクリックイベント結合機能を、実行、およびdocument.execCommand（「コピー」）を実行するために、対応するテキストフィールドを選択します。失敗した場合は、選択したテキストの遺跡、プロンプトボックスを表示します。
(function() {
'use strict';
// click events
document.body.addEventListener('click', copy, true);
//event handler
function copy(e) {
// find target element
var
t = e.target,
c = t.dataset.copytarget,
inp = (c ? document.querySelector(c) : null);
// is element selectable?
if (inp && inp.select) {
// select text
inp.select();
try {
// copy text
document.execCommand('copy');
inp.blur(); }
catch (err) {
alert('please press Ctrl/Cmd+C to copy'); }
} }})();
例住所：https://codepen.io/SitePoint/pen/vNvEwE/
実施例では、スタイルやアニメーションは、コードを数えますが、コードは20本の以上のラインを持っていますが、アニメーションのスタイル、およびオプションです。
概要：
（）.selectによってコピーするフォーム要素の内容を選択
コールdocument.execCommand（「コピー」）方法
.blur（）メソッドを呼び出して、フォーカスがフォーム要素から除去されます
サポートされているブラウザにメッセージを表示せずに、ステップ2〜最初のパッケージにtry catchブロックで3
そうでなければ
、多くの新しいクリップボードのアプリケーションモードがあります。たとえばTrello.com、カードの上にマウスは、Ctrl / Cmdを+ Cカードとクリップボードにリンクアドレスをコピーしてください。その実装の後ろに道は以下のとおりです。URLが含まれている隠されたフォーム要素を作成し、選択し、その内容をコピーします。非常に巧妙かつ実用的な-私は少数のユーザーがこの機能を知っている疑いがあります！
JSについてあなたはどのくらいを学び、クリップボード機能を実現しますか？コメントは、コメント領域に歓迎されています！
