Detailed explanation of the steps to implement the copy function in clipboard.js

This time I will bring you a detailed explanation of the steps to implement the copy function in clipboard.js. What are the precautions for clipboard.js to implement the copy function? Here are practical cases, let’s take a look.

Recently, there is a need at work, which is to use a button to copy the corresponding content. I found many solutions on the Internet, and finally chose the clipboard.js plug-in for implementation. Because it does not rely on flash or other frameworks, and is small in size, easy to use and has good compatibility. Below is a brief introduction to its usage.

Introducing plug-ins, you can download them or use a third-party CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

For HTML, we have two usages.

First type

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target=&#39;#copyValue&#39;>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

Note: If we use a button to copy the content of another element, we can use this method. At this time, the button is called the trigger element, and the copied element is called the target element. At this time, the value of data-clipboard-target is the selector of the target element, and the attribute of data-clipboard-target is set on the triggering element. new Clipboard() is an instantiated object, and the parameters can be HTML elements, element selectors. There are two events, success and error, that we can monitor and implement our own logic. Because after the copy is completed, the target element will be in the selected state, so we need e.clearSelection() to cancel the selected state of the target element.
Advantages: The copied content can be dynamic. When the value of the target element changes, the copied value also changes.

Applicable scenarios: The copy content is variable and not fixed.

Second type

//html部分
<button type="button" data-clipboard-text=&#39;复制内容&#39;>复制</button>
//js部分
new Clipboard('button');

Note: The value of data-clipboard-text is the content you want to copy. There are no target elements, only trigger elements.

Disadvantages: The copied content is static, unchanged, and set in advance.

Applicable scenarios: The copied content is fixed

For the above shortcomings, we can optimize as follows so that the copied content is also dynamic.

//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
  alert('复制成功');
 });
 clipboard.on('error', function (e) {
  alert('复制失败');
 });
})

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue2.0 parent and child components transfer functions to each other (with code)

The use of JS object-oriented Detailed explanation

The above is the detailed content of Detailed explanation of the steps to implement the copy function in clipboard.js. For more information, please follow other related articles on the PHP Chinese website!