<script src="dist/clipboard.min.js"></script>
<script src="dist/clipboard.min.js"></script>
<p>包: 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
中我们可以这样做:
<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
import Clipboard from 'clipboard'; const btnCopy = new Clipboard('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); });
clipboard
,为了使得生命周期管理更加的优雅,在使用完之后记得 btn.destroy()
销毁一下。
<p>clipboard
使用起来是不是很简单。但是,就为了一个 copy
功能就使用额外的第三方库是不是不够优雅,这时候该怎么办?那就用原生方法实现呗。
MDN
上是怎么定义的:
which allows one to run commands to manipulate the contents of the editable region.<p>意思就是可以允许运行命令来操作可编辑区域的内容,注意,是可编辑区域。
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)<p>方法返回一个
Boolean
值,表示操作是否成功。
aCommandName
:表示命令名称,比如: copy
, cut
等(更多命令见命令);aShowDefaultUI
:是否展示用户界面,一般情况下都是 false
;aValueArgument
:有些命令需要额外的参数,一般用不到;<input>
标签,我们想要复制其中的内容,我们可以这样做:
<input id="demoInput" value="hello world"> <button id="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('复制成功'); } })
<input>
标签,我们可能需要从一个 <p>
中复制内容,或者直接复制变量。
<p>还记得在 execCommand()
方法的定义中提到,它只能操作可编辑区域,也就是意味着除了 <input>
、<textarea>
这样的输入域以外,是无法使用这个方法的。
<p>这时候我们需要曲线救国。
<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); })
input.setAttribute('readonly', 'readonly');
使这个 <input>
パッケージ: npm install Clipboard --save、次に <code>import Clipboard from 'clipboard';
<input>
が表示されますタグ内にあるコンテンツをコピーする必要があります。これを行うことができます: 🎜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); })
data-clipboard-target
が <button>
タグ属性に追加されていることに注意してください。 、その値はコピーする必要がある <input>
の id
です。名前が示すように、コンテンツはタグ全体からコピーされます。 🎜<input>
からコンテンツをコピーせずに、変数から値を直接取得したい場合があります。これを Vue
で実行できる場合: 🎜rrreeerrreeeclipboard
を使用する場合、使用後にも言及されています。 btn.destroy()
を使用して必ず破棄してください。 🎜🎜クリップボード
使い方はとても簡単ではないでしょうか?しかし、copy
関数のためだけに追加のサードパーティ ライブラリを使用するのは十分ではありませんか?次に、ネイティブ メソッドを使用してそれを実現します。 🎜🎜document.execCommand() メソッド🎜🎜 まず、このメソッドが MDN
でどのように定義されているかを見てみましょう: 🎜これにより、編集可能領域のコンテンツを操作するコマンドを実行できます。 /blockquote >🎜 編集可能領域の内容を操作するコマンドを実行できるということですが、 それは編集可能領域であることに注意してください。 🎜🎜Definition🎜bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)🎜 このメソッドは、操作が成功したかどうかを示すBoolean
値を返します。 🎜🎜🎜🎜aCommandName
:copy
、cut
などのコマンド名を表します (その他のコマンドについてはコマンドを参照してください)。 🎜🎜🎜aShowDefaultUI: ユーザー インターフェイスを表示するかどうか、通常はfalse
🎜🎜🎜🎜aValueArgument
: 一部のコマンドには追加のパラメーターが必要ですが、通常は必要ありません。 🎜🎜🎜🎜互換性🎜🎜 このメソッドの互換性は以前はあまり良くありませんでしたが、幸いなことに現在はすべての主流ブラウザと基本的に互換性があり、モバイル端末でも使用できます。 🎜🎜🎜 🎜入力ボックスからコピー
を使用します🎜 これで、ページに<input>
タグがあり、その中のコンテンツをコピーしたいので、これを実行できます: 🎜 rrreeerrreee他の場所にコピー
🎜 ページに<input>
タグがない場合は、<p>
からコンテンツをコピーする必要がある場合があります。 >、または変数を直接コピーします。 🎜🎜execCommand()
メソッドの定義では、編集可能領域でのみ操作できることに注意してください。これは、<input> や
<textarea>
などの入力フィールド以外では使用できません。 🎜🎜現時点では、私たちは国を救う必要があります。 🎜rrreeerreeee🎜カーブを抜けて国を救うことに成功したと言えるでしょう。この方法を使用すると、いくつかの落とし穴に遭遇しました。 🎜落とし穴
🎜 Chrome でデバッグする場合、この方法は完全に機能します。そして、モバイル端末をデバッグする段階になると、落とし穴が現れました。 🎜🎜はい、そうです、あなたです、ios。 。 。 🎜🎜🎜 [コピー] をクリックすると、画面の下部に白い画面のジッターが表示されます。よく見ると、キーボードを引き上げてすぐにしまうことができます🎜。 🎜ジッターの原因がわかれば、解決しやすくなります。キーボードが引き上げられているため、フォーカスは入力フィールドにあります。そのため、コードに
input.setAttribute('readonly', 'readonly');
を追加して、入力フィールドを入力できないようにします。この<input>
を読み取り専用にすると、キーボードはプルアップされなくなります。 🎜🎜🎜🎜コピーできません🎜<p>这个问题是由于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); })
相关推荐:
JS复制内容到剪切板的实例代码(兼容IE与火狐)_javascript技巧
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板_jquery
JavaScript实现复制内容到粘贴板代码_javascript技巧
以上がJavaScript のコンテンツをクリップボードにコピーする実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。