Clipboard.js: Mobile Browser for Web content replication

Recently encountered a requirement in the project:

Click the button to copy the specified URL to the Clipboard, and then the user can paste it into the browser (safari-based) to open itself.

Scenario One: Zeroclipboard.js

GitHub address : Https://github.com/zeroclipboard/zeroclipboard

copy principle : Zeroclipboard use transparent flash overlay on the Copy button, click Flash, copy the content into Flash, and then write the incoming content to the Clipboard via Flash

The first reason to think of this plugin is that before the PC-side project used, compatibility is very good, very familiar with, so, first used it to do a demo

Html

<input type= "text" name= "" id= "Iurl" value= "Https://github.com/zeroclipboard/zeroclipboard" ><button id= " Copyurlbtn "> Copy link </button>

Javascript

(function () {            var btn = document.getElementById (' copyurlbtn '),            text = document.getElementById (' Iurl '),            ZC = new Zeroclipboard (BTN);    Zc.on (' Beforecopy ', function (e) {        zc.settext (text.value);    });    Btn.onclick = function () {    alert (' copied ');    }}) ();

The following two points need to be noted for using zeroclipboard.js:

# zeroclipboard.swf and ZeroClipboard.min.js need to be in the same directory structure, zeroclipboard.swf No need to call, just in the page to refer to ZeroClipboard.min.js;

The test replication function in the server environment, can be a simple local server, such as: http://localhost:8000/xx

Test results:

Tested on a PC-side browser, but not on iOS, whether it's a QQ browser or a Safari browser.

Perhaps because of the flash technology is being neglected by the major browser manufacturers, so until now zeroclipboard.js the latest version, also can not be implemented in the mobile browser for text copying.

Scenario Two: Clipboard.js

website address : https://clipboardjs.com/

Compatibility:

Although the Safari version is required to be over 10, the author has done a good grace downgrade:

The good news is this clipboard.js gracefully degrades if you need to support older browsers. All saying copied! of the show a ToolTip When success event was called and press CTRL + C to copy when error event was called because the text is already selected.

In other words, the safari version is more than 10, can be copied directly, if the version is less than 10, you can prompt the user to copy manually by the following code:

Clipboard.on (' Error ', function (e) {    alert (' Please select ' copy ' for copy! ')});

Effects of Safari version under 10:

After alert (' Please select ' copy ' to copy! '), the text to be copied is automatically selected, and the tooltip of the system itself pops up

The effect is as follows:

DEMO:

Html:

   <!--Target    --<input id= "foo"  value= "http://www.968309.com/mobile.php" >    <!--Trigger- -    <button class= "btn" data-clipboard-target= "#foo" > Copy </button>

Javascript:

    init    var clipboard = new Clipboard ('. btn ');    Graceful downgrade: Safari version number >=10, prompted to copy success, otherwise prompted to manually select "Copy" after the text is selected to copy    clipboard.on (' Success ', function (e) {        alert (' Copy succeeded! ')        E.clearselection ();    });    Clipboard.on (' Error ', function (e) {        alert (' Please select ' copy ' for copy! ')    });

　　

Clipboard.js: Mobile Browser for Web content replication