JSで今日は知識にあなたと一緒にクリップボードの内容を共有するのでコピーします。
図1は、クリップボードに内容をコピーします
最近のアクティビティページは、小規模な需要があり、ユーザーがクリックするか、長押しが発生した実装プロセスとピットについては、クリップボードにレコードを内容をコピーすることができます。
一般的な方法は
：Googleは、今や一般的な方法は、主に以下の2つですすべてチェックする
サードパーティのライブラリ：clipboard.js
）document.execCommand（：ネイティブメソッドを
これらの2つの方法のそれぞれを見ての使用である
clipboard.js
：これは、クリップボードの公式ウェブサイトですhttps://clipboardjs.com/ルックスは、シンプルなのであり、
参考
直接参照：<のscriptsrc = "DIST / clipboard.min.js ">
パッケージ：NPMは、クリップボード保存をインストールした後、importClipboardfrom'clipboard「;
使用
入力ボックスからコピーが
今の<input>タグがあり、我々はこれを行うことができ、ページの内容をコピーする必要があります。
<input id ="demoInput" value ="hello world"><button class ="btn" data-clipboard-target="#demoInput">点我复制</button>
importClipboard from 'clipboard';const btnCopy = newClipboard('btn');
<ボタン>タグの値がコピーされる、<入力> IDのデータをクリップボードターゲット属性を追加し、そのノートは、それが全体のラベルからコピーコンテンツであることを示唆しています。
直接コピーは
時々 、私たちは<入力>から内容をコピーしたくない、値が変数からのみ直接です。Vueの場合、我々はこれを行うことができます。
<button class="btn":data-clipboard-text ="copyValue">
点我复制
</button>
importClipboard from 'clipboard';
const btnCopy = newClipboard('btn');
this.copyValue = 'hello world';
イベントは、
時には我々は、コールバック関数をサポートする必要性に、この時間をコピーした後、何かをする必要があります。
次のコードハンドラを追加します：
// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
console.info('Action:', e.action);
// 动作名称，
比如：Action: copy console.info('Text:', e.text);
// 内容，
比如：Text：hello word console.info('Trigger:', e.trigger);
// 触发元素：
比如：
<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
e.clearSelection();
// 清除选中内容});
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);});
要約
文書はまた、それを破壊するために使用した後）、ライフサイクル管理、よりエレガントに（btn.destroyを覚えているために、単一のページでは、クリップボード、場合と述べました。
クリップボードは使用し非常に簡単ではありません。しかし、ちょうど十分な優雅さ、この時間はどのように行うにはされていない追加のサードパーティ製のライブラリにコピー機能を使用するには？そして、ネイティブメソッドの実装の聖歌を使用しています。
document.execCommand（）メソッド
MDNが定義されている方法で、この方法は最初に見て：
。RUNコマンドは、編集可能領域での内容に操作することがandroid.permissionするための一つ
、それは操作内容編集可能領域を許可するようにコマンドを実行することができます意味は、注意が編集可能な領域です。
定義
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
この方法は、操作が成功したかどうかを示すブール値を返します。
aCommandName：（より多くのコマンドは、コマンドを参照）など、コピー、カット;：のような、コマンド名を示し
aShowDefaultUI：通常の状況が間違っているの下に、ユーザーインターフェイスを表示するかどうか;
aValueArgument：いくつかのコマンドは通常より少ないと、追加のパラメータが必要
互換性は、
この方法では、実際には前に非常に良い互換性はありませんが、良いニュースは、すべての主要なブラウザと基本的に互換性があり、また、携帯端末で使用することができます。
使用
入力ボックスからコピーが
今ページ上のラベルを持って、我々はその内容をコピーしたい、我々はこれを行うことができます：
<inputid="demoInput"value="hello world">
<buttonid="btn">点我复制</button>
const
btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})
他のローカルコピーが
時々標識しないページは、私たちは、<div>の直接コピーする変数の内容をコピーする必要があるかもしれません。
execCommand（）メソッドの定義で述べたように、それだけで編集可能な領域を操作することができる覚えている、すなわち手段に加えて<入力>、例えば<TEXTAREA>入力フィールドよりも、この方法を使用することができません。
我々はQuxianjiuguoを必要とする。この時
<button id="btn">点我复制</button>
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute(
'value'
,
'听说你想复制我'
);
input.select();
if
(document.execCommand(
'copy'
)) {
document.execCommand(
'copy'
);
console.log(
'复制成功'
);
}
document.body.removeChild(input);
})
Quxianjiuguoはそれの成功を考えました。この方法を使用するとき、我々はいくつかのピットが発生しました。
ピットが発生し
、この方法は完璧な実行されると、一度にChromeをデバッグします。そして、デバッガの終わりに移動し、ピットが出てきました。
はい、はい、それはあなたは、IOSのです。。。
画面の下部には1. [ジッタ黒と白のコピーとなります、詳しく見は瞬時にキーボードをプルアップし、片付けで
生成されたジッタの原因が何であるかを知っているが、より良い解決されます。キーボードが引っ張られているので、それは入力フィールドに集光され、入力フィールドが入力されていないだけinput.setAttributeコード（「読み取り専用」、「読み取り専用」を追加して、十分になるだろう ）。 <入力>は読み取り専用であることを確認それはキーボードをプルアップしません。
2.複製することができない
問題が原因input.select（ある）は、IOSの内容全体を選択していない、我々はコンテンツを選択するための別の方法を使用する必要があり、この方法はinput.setSelectionRange（0、input.value.length）です。
完全なコードは次のとおりです。
const btn = document.querySelector('#btn'
);
btn.addEventListener('click',() => {
const input = document.createElement(
'input'
);
input.setAttribute('readonly', 'readonly'
);
input.setAttribute(
'value'
,
'hello world'
);
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if
(document.execCommand('copy')) {
document.execCommand(
'copy'
);
console.log(
'复制成功'
);
}
document.body.removeChild(input);
})
まとめ
JavaScriptをどのように達成するかについてである以上は、クリップボードに内容をコピーいくつかのリンクを添付：
execCommand MDN：
https://developer.mozilla.org/en-US/docs/Web/API/Document/
execCommandexecCommand互換性：HTTPS： //caniuse.com/#search=execCommand
clipboard.js：
https://github.com/zenorocha/clipboard.js
JSについてあなたはどのくらいを学び、クリップボードの内容をコピー？コメントは、コメント領域に歓迎されています！
