Front end replication

Replication mainstream implementation

At present, there are four main ways of copy: ZeroClipboard.js, Clipboard.js, execCommand

Differences in replication

ZeroClipboard: it's the most compatible. It can be fully compatible with chrome/firefox/ie/safari, but the plug-in is large, 230KB. The implementation method is flash method. By loading a flash and letting it access the system clipboard, the permission limit of most systems can be bypassed.
Clipboard.js is relatively small, 4KB, compatible with chrome / FF / IE > 9 / safari.
execCommand: compatible with new version of chrome / FF / IE > 9 / safari. execCommand is a document method, which is a good thing.

Copy implementation code

Skip ZeroClipboard.js here

Clipboard.js code


    <span id="receiptNo">${receiptNo}</span> 
    <span id="copyboard" class="" data-clipboard-target="#receiptNo">copy</span> 


<script src="dist/clipboard.min.js"></script>
  if(window.addEventListener && $("#copyboard").length>0){     
    var clipboard = new Clipboard('#copyboard');
    clipboard.on('success', function(e) {'Already copied', '#copyboard');
      alert("Replication is not supported IE9 Please copy the following version manually!");

execCommand code


<span class="copy" @click="copyToClipBoard()">copy</span>
<input type="text" id="copyLink" disabled="disabled" value=" ">


// Copy to Clipboard 
        copyToClipBoard: function() {
                value: this.receiptNo,
                disabled: false
            document.execCommand("copy", false, null);
                value: ' ',
                disabled: true
  'Replication success', '.copy', {
                tips: [1, '#12a4e5'],
                time: 2000

Keywords: IE Firefox

Added by andynick on Tue, 31 Mar 2020 01:50:56 +0300