clipboard.jsを使用してjsコピー貼り付け機能を実現
最近プロジェクトをする時コピーの貼り付けの機能を実現する必要があって、しかしjs自身の提供する各種の方法は互換性の問題があって、最後にプラグインを使って実現することを決定して、多くのプラグインを探して、1項の比較的に使いやすいことを発見して、みんなに分かち合います
公式サイトのアドレス:https://clipboardjs.com/
jsパッケージのダウンロードアドレス:
1.clipboard.min.jsファイルを導入する2.buttonボタンを定義し、ボタンの属性に注意する:data-clipboard-action=“copy”は複製行為を表し、data-clipboard-text=“XXX”、XXXは複製する内容を表す3.jsを書き、clipboardオブジェクトを確立し、複製後に実行する方法
デモコードは次のとおりです.
公式サイトのアドレス:https://clipboardjs.com/
jsパッケージのダウンロードアドレス:
jsDelivr
< script src = “ https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js ” > script >
cdnjs
< script src = “ https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js ” > script >
RawGit
< script src = “ https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js ” > script >
unpkg
< script src = “ https://unpkg.com/[email protected]/dist/clipboard.min.js ” > script >
面倒なのはここを見てください.1.clipboard.min.jsファイルを導入する2.buttonボタンを定義し、ボタンの属性に注意する:data-clipboard-action=“copy”は複製行為を表し、data-clipboard-text=“XXX”、XXXは複製する内容を表す3.jsを書き、clipboardオブジェクトを確立し、複製後に実行する方法
デモコードは次のとおりです.
target-div
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert(' , '+e.text);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
alert(' ')
});