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>
猜你喜欢
