js插件clipBoard.js实现一键复制

clipboard.js不需要jquery依赖,也不需要flash的支持,而另一个插件zClip需要依赖于flash,clipboard.js显得更加灵活。

引入clipboard.js

<script src = "https://libs.bsdev.cn/clipBoard.js/clipBoard.min.js"></script>

使用方法

var copy = new clipBoard(document.getElementById('data'), {
    beforeCopy: function() {

    },
    copy: function() {
        return document.getElementById('data').value;
    },
    afterCopy: function() {

    }
});

参数说明

beforeCopy:复制前需要执行的动作
copy:复制内容
afterCopy:复制后需要执行的动作

演示代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>New Document</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script src = "https://libs.bsdev.cn/clipBoard.js/clipBoard.min.js"></script>
</head>
<body>
    <input type="text" id = "data" />
    <button id = "btn" onclick = "return copy();">复制</button>
    <script>
        function copy() {
            var copy = new clipBoard(document.getElementById('data'), {
                beforeCopy: function() {
                },
                copy: function() {
                    return document.getElementById('data').value;
                },
                afterCopy: function() {
                    alert('复制成功');
                }
            });
        }
    </script>
</body>
</html>

其它说明

clipBoard.js支持复制/剪切/粘贴等操作,更多介绍请参考项目地址:https://github.com/baixuexiyang/clipBoard.js

标签: clipboard.js

发表评论: