Resolves an issue in which clipboad.js replication fails on the mobile side

1. Frontier

Use Clipboad.js in your project to implement a click button to automatically copy a URL to the Clipboard. Starting with normal, the PC end of the mobile terminal is normal. Suddenly a test made a bug and the copy failed. It's just a face.

Let's talk about the process of solving this bug.

2. Thinking through Imagery

1, encountered this bug, my first thought is that this is a popular mainstream plug-in, the Internet should have a ready-made solution. Then search the online method, the binding Data-clipboard-target property of the button tag from div to button, or useless. The solution on the web failed.

2, thinking: Why with the project, the replication function will be invalid. is not a global disabled some default events, resulting in clipboad.js internal implementation of the replication function with the disabled default event conflicts, so the replication failed. According to this idea to troubleshoot the two methods: 1, to see the source of the Clipboard, find the specific implementation of the replication function, and what events and default events associated with, and then to find the conflict point. 2, the business code to troubleshoot, where to do the global event configuration, these configurations to check which affects the implementation of the Clipboad replication function. The first kind of relative cowhide, learning the principle is very good growth. The second, is a more stupid method, sometimes more effective, may be in a small number of trials found the bug point, sometimes can not find out. Only a small amount of time can be spent experimenting with the second method. In fact, there is another way, is to change a way to achieve the replication function. The wheels have been built, and there are two ways to implement the copy function according to the documentation.

I started by using the method 1:html property binding to copy the content. As follows:

<!--Target--><textarea id= "Bar" >mussum ipsum cacilds...</textarea><!--Trigger-->< Button class= "btn" data-clipboard-action= "Cut" data-clipboard-target= "#bar" >    cut to clipboard</ Button>

Then the experiment was changed to another way of implementing the document description 2:js binding the copied content. As follows:

New Clipboardjs ('. Btn ', {    function(trigger) {        return Trigger.getattribute (' Aria-label ');}    );

The second method successfully resolves the problem of mobile replication failure.

3. Find out why

It can be said, "opportunistic", the minimum cost to solve the problem. Although the problem is solved, there is time to find the cause of the bug. Looking back carefully at the following document, in the description of Method 1 (the method for which the mobile copy failed), see this passage:

The idea is that the object will be selected after the copy or cut operation, and the object will capture and feedback information by triggering some cases (events).

The point is: The above sentence is the focus, what have been selected after a copy/cut operation. According to the description, the copied object is to be selected (selected).

It suddenly occurred to me that the function of long pressing the selected text in the business code was disabled globally ..... The following CSS is used

Html,body {    user-select: none;     -moz-user-select: none;     -webkit-user-select: none;     -webkit-touch-callout: none;     -webkit-text-size-adjust: none;     -webkit-tap-highlight-color: transparent;     -webkit-user-select: none;}

Finding suspects, tested, is really the cause of this, causing the method 1 replication function to fail.

Think again, Method 1 Method 2 difference. Speculation: Method 1, affected by css:user-select, should be related to the principle of internal implementation. Method 2, in the new instance, passed the text parameter, the copy content is obtained through JS, so it is not affected by css:user-select. All speculation and appearance, reach a high degree of relevance. This is only a powerful speculation, the last most effective argument, but also to study the implementation of Clipboad source code.

The problem is found and the solution is there. This bug is a temporary paragraph!!

4. Summary:

1. There are many ways to solve the problem. Sometimes according to the appearance of the problem to analyze the problem, there are several ways to troubleshoot. Sometimes do not have to dwell on the problem of the appearance and reasons, all roads to Rome, in another way to achieve the function, also good. No matter which way to solve, there are different pay and harvest.

Resolves an issue in which clipboad.js replication fails on the mobile side