今回は、JSでコンテンツをクリップボードにコピーする方法と、JSでコンテンツをクリップボードにコピーする際の注意事項を紹介します。実際のケースを見てみましょう。
一般的な方法
万能の Google を調べたところ、現在一般的な方法は主に次の 2 つです:
サードパーティライブラリ:clipboard.js
ネイティブメソッド:document.execCommand()
これら 2 つの方法がどのように使用されるかを見てみましょう。
クリップボード.js
これはクリップボードの公式 Web サイトです: https://clipboardjs.com/、とても簡単そうです。
引用
直接引用:
パッケージ: npm install clipboard --save ，然后 import Clipboard from 'clipboard';
使用
入力ボックスからコピーします
ページに <input> タグがあるので、その中のコンテンツをコピーする必要があります。これを行うことができます:
<input id="demoInput" value="hello world"> <button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
<button> 标签中添加了一个 data-clipboard-target 属性，它的值是需要复制的 <input> 的 id では、名前が示すように、コンテンツがタグ全体からコピーされることに注意してください。
直接コピー
場合によっては、<input> から内容をコピーせずに、変数から直接値を取得したい場合があります。 Vue でこれを実行できる場合:
イベント
コピー後に何かをする必要がある場合があります。その場合は、コールバック関数
のサポートが必要です。import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';概要
このドキュメントでは、単一ページで clipboard を使用すると、ライフサイクル管理はより洗練されています。使用後は忘れずに btn.destroy() を破棄してください。
clipboard ，为了使得生命周期管理更加的优雅，在使用完之后记得 btn.destroy()
まず、このメソッドが でどのように定義されているかを見てみましょう:
これにより、編集可能領域の内容を操作するコマンドを実行できるようになりますMDN
。 これは、コマンドを実行して編集可能領域の内容を操作できることを意味します。 定義
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
このメソッドは、操作が成功したかどうかを示すブール値を返します。
aCommandName: copy、cut などのコマンド名を表します (その他のコマンドについてはコマンドを参照)。
使用
从输入框复制
现在页面上有一个 <input> 标签，我们想要复制其中的内容，我们可以这样做：
<input id="demoInput" value="hello world"> <button id="btn">点我复制</button>
js代码
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})其它地方复制
有的时候页面上并没有 <input> 标签，我们可能需要从一个 <p> 中复制内容，或者直接复制变量。
还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、