js 实现复制粘贴 | 实现复制粘贴

js 实现复制粘贴
<!DOCTYPE html>

<html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>点击复制内容移动端全兼容(专治各种移动端浏览器)</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        body{

            background: #fff;

        }

        button{

            width:100px;

            height:45px;

        }

    </style>

</head>

<body>

<button id="copy">点击复制</button>

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

<script>

    /**

     * [点击复制内容移动端全兼容(专治各种移动端浏览器)]

     * @author  majiang by beijing

     * @createtime  2018-11-17

     * @blog  http://www.love85g.com

     */

    ;(function($) {

            var defaults = {

                imgUrl: "",

                text: "复制成功",

                copyUrl: "",

                tipTime: 2000,

                copyId: ""

            };

            $.extend({

                copy: function(option) {

                    var options = $.extend({}, defaults, option);

                    var URL = options.copyUrl == "" ? window.location.href.split('#')[0] : options.copyUrl;

                    var cId = options.copyId == "" ? '#copy' : options.copyId;

                    var IMG = options.imgUrl == "" ? "" : '<img style="width: 22px;" src="' + options.imgUrl + '">';

                    var tipsHtml = '<div id="share-tips" style="position: fixed;top: 50%;left:50%;background: rgba(0,0,0,.5);border-radius: 4px;margin: 0 auto;color: #fff;z-index: 9999;padding: 5px 10px;font-size: 14px;text-align: center;transform: translate(-50%,-50%);">' + IMG + '<p>' + options.text + '</p></div>';

                    var u = navigator.userAgent;

                    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;

                    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

                    var aEle = document.querySelectorAll(cId);

                    if (isAndroid || (!isAndroid && !isiOS)) {

                        $(aEle).each(function() {

                            var index = $(this).attr("id").split("y")[1];

                            $('body').append('<textarea id="selector' + index + '" style="position:absolute;top:-9999px;left:-9999px;" readonly>' + URL + '</textarea>');

                            $(this)[0].onclick = function(event) {

                                $("#selector" + index).select();

                                document.execCommand("copy", false, null);

                                $("body").append(tipsHtml);

                                setTimeout(function() {

                                    $("#share-tips").remove()

                                }, options.tipTime)

                            }

                        })

                    }

                    if (isiOS) {

                        $(aEle).each(function() {

                            var index = $(this).attr("id").split("y")[1];

                            $('body').append('<a id="selector' + index + '" style="position:absolute;top:-9999px;left:-9999px;">' + URL + '</a>');

                            this.addEventListener('click', function() {

                                var copyDOM = document.querySelectorAll('#selector' + index);

                                var range = document.createRange();

                                range.selectNode(copyDOM[0]);

                                window.getSelection().removeAllRanges();

                                window.getSelection().addRange(range);

                                document.execCommand('copy');

                                $("body").append(tipsHtml);

                                setTimeout(function() {

                                    $("#share-tips").remove()

                                }, options.tipTime)

                            }, false)

                        })

                    }

                }

            })

        }

    )(jQuery);

</script>

<script>

    $.copy({

        imgUrl:"success-tips.png", //分享图标地址

        text:"复制成功", //分享提示文案

        copyUrl:"复制成功", //自定义复制链接地址

        tipTime:2000, //分享提示消失时间

        copyId:"#copy"//复制按钮id

    });

</script>

</body>

</html>