快捷搜索:   服务器  PHP  安全  IIS  linux 安全

clipboard.js实现点击复制网页内容到剪切板(兼容主流所有浏览器)

clipboard.js利用一个非常小的JS文件来实现兼容目前所有主流浏览器的点击复制数据到剪切板功能,跟现在主流的zeroclipboard 比起来简单易用许多(毕竟现在flash漏洞那么多,而且HTML5也是不用FLASH了) 

这个实现方式主要用到github上的一个开源的项目:clipboard.js (项目地址:https://github.com/zenorocha/clipboard.js/archive/master.zip)官方地址:https://clipboardjs.com/

下面看一个DEMO

首先引入依赖JS包:

<script src="../clipboard.min.js"></script>

然后实例化clipboard(clipboard实例化需要指定一个元素,也就是点击指定元素会触发复制方法)

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

下面是一份完整DEMO:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>target-textarea</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 数据区 定义ID名为bar-->
    <textarea id="bar">hello</textarea>
    <!-- 点击按钮 则引用ID名为bar的内容,cut方法是剪切走-->
    <button data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
    <!-- 引入脚本文件 -->
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.min.js"></script>
    <!-- 脚本方法 -->
    <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

这样就可以简单的完成对主流浏览器进行JS复制的操作了.

DEMO地址:https://www.bnxb.com/demo/other/clipboard.min.html

本例子只是做出了一个基础的操作, 
如果想深入了解请到clipboard.js官方网站了解详情, 防止失效,附件上传

clipboard.js-master.zip

顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论