clipboard. js usage summary

  • 2021-12-05 05:14:22
  • OfStack

Directory (1) introduces: (2) clipboard can copy content in the following ways (3) There are two types of Function operations: (4) Returning copied content through attributes (5) How functions and properties are compatible

(1) Introduction:

clipboard. js is a lightweight JavaScript plug-in that copies text to the clipboard. With this plug-in, text content such as input boxes, text fields, and text in DIV elements can be copied to the clipboard

clipboard. js supports mainstream browsers: chrome 42 +; Firefox 41 +; IE 9 +; opera 29 +; Safari 10 +;

(2) The copying methods of clipboard are as follows

Copy the target content from target
Contents to be copied through function
Returns copied content through properties
target copy the target content, not here, just say 1 function and attribute operation.

(3) There are two types of Function operations:

Type 1:

Copy content through function of target
Specify the node to be copied through target, where the return comfort value is' hello '


   <button class="btn">Copy_target</button>
   <div>hello</div>

   <script>
   var clipboard = new Clipboard('.btn', {
   //  Pass target Specify nodes to copy 
       target: function() {
                  return document.querySelector('div');
             }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
   });
   </script>

Type 2:

Copy content through function of text
function for text, return 'to be or not to be'


<button class="btn">Copy</button>
<script>
   var clipboard = new Clipboard('.btn', {
   //  Click copy Button, directly through text Directly return to the copied content 
       text: function() {
           return 'to be or not to be';
       }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
});

(4) Returning copied content through attributes

Type 1: Single node

The node object is specified through id and passed as a parameter to Clipboard. The content of the return value here is the content of data-clipboard-text


//  Pass id Get replication data-clipboard-text Content of  
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>
 
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>

Type 2: Multi-node

Get all button buttons through class and pass them to Clipboard as parameters. When each button is clicked, the content of the return value is the content of its corresponding data-clipboard-text, which is 1, 2 and 3 respectively


//    Pass class Register multiple button , get the data-clipboard-text Value of 
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

(5) How functions and properties are compatible

Function:


//ClipboardJS.isSupported()    //-------- This sentence is: Is it compatible 
var clipboard = new Clipboard('.btn');
// Elegant demotion :safari  Version number >=10, Prompt replication successful ; Otherwise, it is prompted to manually select "Copy" to copy after the text is selected 
clipboard.on('success', function(e) {
    alert(' Successful replication !')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert(' Please select Copy to copy !')
// Try to remove alert The "copy" tool of the system can be popped up, but it needs to be clicked twice before it can be popped up. The specific reason is still unclear. Refer to the above figure. Some people say you can try 1 Write at the trigger 1 Empty click event ,  O nclick=""  Because ios Not simply support on Events 
}); 

Attributes:


<img
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="copy"
      data-clipboard-action="copy"
      class="email"
      :data-clipboard-text="'mayouchen@csdn.com'"
    /> 

-------------------
  copy() {
     var clipboard = new Clipboard(".email")
     // console.log(clipboard);
     clipboard.on("success", e => {
       // console.log(" Successful replication ", e);
       Toast({
         message: " Successful replication "
       })
       //  Release memory 
       clipboard.destroy()
     })
     clipboard.on("error", e => {
       //  Replication is not supported 
       Toast({
         message: " Copy function is not supported by mobile phone permissions "
       })
       console.log(" This browser does not support automatic replication ")
       //  Release memory 
       clipboard.destroy()
     })
   }

Related articles: