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. python爬虫——爬取网页数据和解析数据

    1.网络爬虫的基本概念 网络爬虫(又称网络蜘蛛,机器人),就是模拟客户端发送网络请求,接收请求响应,一种按照一定的规则,自动地抓取互联网信息的程序.只要浏览器能够做的事情,原则上,爬虫都能够做到. 2 ...

  2. 常见的meta标签属性

    meta标签是网页元标签.可以定义一些网站的功能. 1. name属性 name属性的通用格式如下: <meta name="xxx" content="xxxx, ...

  3. 3 Ways to Force Unmount in Linux Showing “device is busy”

    3 Ways to Force Unmount in Linux Showing “device is busy” Updated August 8, 2019By Bobbin ZachariahL ...

  4. 洛谷 P1854 花店橱窗布置 题解

    Analysis 给定一个f*v的矩阵 要求从第一行走到第f行,每行取走一个数, 且该行所取的数必须必上一行所取的数的列数大 , 求所能取走的最大值 注意每一行所取走的数字的列数必须大于等该行的行号 ...

  5. learning java AWT widowEvent and MouseEvent

    import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import jav ...

  6. 鼠标经过提高层级案例（margin，相对定位，z-index）

    <body> <ul> <li class="box1">1</li> <li class="box2"& ...

  7. 【一起来烧脑】一步学会JavaScript体系

    [外链图片转存失败(img-b0GOhxRY-1563571645197)(https://upload-images.jianshu.io/upload_images/11158618-ba249b ...

  8. 一次 react-router 中遇到的小坑

    react-router Link 标签不生效的问题 废话不多说, 直接上问题, 排解过程和答案 现象: 发现 使用 Link 标签没有 元素的样式和效果, 也不能进行跳转 代码如下: render( ...

  9. Pytest权威教程05-Pytest fixtures：清晰 模块化 易扩展

    目录 Pytest fixtures:清晰 模块化 易扩展 Fixtures作为函数参数使用 Fixtures: 依赖注入的主要例子 conftest.py: 共享fixture函数 共享测试数据 生 ...

  10. python2 && python3 的 input函数

    Python2.x中的input()函数input()函数让我们明确我们输入的是数字格式还是字符格式,就是我们自己要知道我们想要的是什么,数字格式直接输入,字符格式必须加上单引号或者双引号,以确定我们 ...