Mobile js implementation click copy to the clipboard, with prompts, compatible with all browsers, including Android and ios and UC, QQ, wechat, mobile phone and other browsers.

None. 20190716 Updates the NPM installation

react-to-copy

vue-to-copy

Dead simple, popular star:

https://github.com/majiang666/copy.git
Copy the code

To view the demo

The first is to click the link to copy the current page, the second is similar to the card function, need to copy the password, etc., before the demand is too urgent, basically use clipboard.js, the use method is also very simple: (this way there will be many browsers and model is not support, can only to do down-cycled, prompt the user to manually copy, but if encounter when copying the hidden card vouchers worth have a problem, not only in support of and put the value again, is used to manually copy, although solved but still not perfect.)

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Cut to clipboard
</button>

var clipboard = new ClipboardJS('.btn');

clipboard.on('success'.function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error'.function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
Copy the code

There are also implementations such as ZeroClipboard. Of course, today is to introduce the method used in the project before, and re-use jquery to make a plug-in version, can be said to be compatible with all mobile browsers, I have tried android huawei built-in browser, uc browser, qq browser, iphoneX safari browser, wechat built-in browser, etc. (if there is no support for the message let me know), the way to use is also very simple:

The introduction of the jquery

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
Copy the code

The introduction of js

<script src="https://www.love85g.com/cdn/copy/jquery.copy.min.js"></script>
Copy the code

Usage:

$.copy({
    imgUrl:"success-tips.png"// Share icon address text:"Copy successful"// Share a copyUrl:""TipTime :2000, // Share tips disappear time copyId:"#copy"// copy button id});Copy the code

Extensions :(multiple copies per page)

var data = [
    {
        "url":"www.baidu.com"}, {"url":"www.qq.com"}, {"url":"www.163.com",}]; $.each(data,function(i,item){
     $("body").append('<button id="copy'+i+);
     $.copy({
         imgUrl:"success-tips.png"// Share icon address text:"Copy successful"TipTime :2000, // Share prompt time copyId:"#copy"+ I // copy button id}); });Copy the code