clipboard.jsを使用してjsコピー貼り付け機能を実現


最近プロジェクトをする時コピーの貼り付けの機能を実現する必要があって、しかしjs自身の提供する各種の方法は互換性の問題があって、最後にプラグインを使って実現することを決定して、多くのプラグインを探して、1項の比較的に使いやすいことを発見して、みんなに分かち合います
公式サイトのアドレス: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('    ')
        });