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>

js 实现复制粘贴的更多相关文章

  1. js 实现复制粘贴文本过滤（保留文字和图片）

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  2. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  3. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  4. 在html页面通过js实现复制粘贴功能

    前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...

  5. JS ----实现复制粘贴功能 (剪切板应用clipboardData)

    注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...

  6. js实现复制粘贴

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  7. [JavaScript] 怎么使用JS禁止复制粘贴

    1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...

  8. js 实现复制粘贴时注意方法中需要两次点击实现的bug

    方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...

  9. js禁止复制粘贴

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...

随机推荐

  1. pycharm 远程修改服务器代码

    首先在本地和服务器上下载pydevd pip3 install pydevd 然后在 设置SSH连接, 出现:java.net.ConnectException:Connection refused ...

  2. [NgRx] Optimistically Editing Entity Data

    First thing first, let's define a action to update entity: import { createAction, props } from " ...

  3. 文件操作2-Day3

    一.文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 二.文件打开模式 1.普通打开模式 r:只读模式(不加参数则默认只读:不能写,不能追加) w:只写模式(只能 ...

  4. SB的SDOISB记

    恩, SDOI考完 考完. day0 : 上车时看myj费劲跨过行李的样子,嘲讽他腿短.很happy 吃饭时和myj吃了羊肉..汤 虽然贵, 但是意外的好吃 继续嘲讽myj不是男人,吃的少 不知怎么的 ...

  5. lixuxmint系统定制与配置（2）-输入法

    小书匠Linux RIME的官网在这里 1.安装 刚开始是使用ibus-rime,后来使用过程感觉不舒服,就换回fcitx-rime.使用以下命令安装fcitx-rime sudo apt insta ...

  6. Day14:CSS垂直居中

    verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...

  7. 判断qq浏览器和uc浏览器？

    判断在iphone手机上打开的是uc浏览器还是qq浏览器 <html lang="en"> <head> <meta charset="ut ...

  8. 小福bbs-冲刺集合

    [小福bbs-冲刺集合] 一 . 7次团队冲刺博客的链接 第①次冲刺链接 第②次冲刺链接 第③次冲刺链接 第④次冲刺链接 第⑤次冲刺链接 第⑥次冲刺链接 第⑦次冲刺链接 冲刺的时间 日志博客的名称 当 ...

  9. selenium之 下拉选择框Select

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  10. 深度学习面试题16：小卷积核级联卷积VS大卷积核卷积

    目录 感受野 多个小卷积核连续卷积和单个大卷积核卷积的作用相同 小卷积核的优势 参考资料 感受野 在卷积神经网络中,感受野(Receptive Field)的定义是卷积神经网络每一层输出的特征图(fe ...