使用clipboard.min.js实现一键复制内容,且支持移动端

责编:menVScode 2018-12-18 13:14 阅读(947)

1、clipboard.min.js文件CND地址:

    https://www.bootcdn.cn/clipboard.js/

2、clipboard.js 官网:

    https://clipboardjs.com/

3、利用clipboard.js实现复制几种方式

(1)方式一:target

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://menvscode.com/public/js/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.js"></script>
</head>
<body>
	<button class="btn">Copy</button>
    <div>menvscode.com</div>
    <script>
	    var clipboard = new ClipboardJS('.btn', {
	        target: function() {
	            return document.querySelector('div');
	        }
	    });

	    clipboard.on('success', function(e) {
	        console.log(e);
	        alert('复制成功!')
	    });

	    clipboard.on('error', function(e) {
	        console.log(e);
	    });
    </script>
</body>
</html>

打印 console.log(e) 结果为:


(2)方式二:text

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://menvscode.com/public/js/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.js"></script>
</head>
<body>
	<button class="btn">Copy</button>
    <script>
	    var clipboard = new ClipboardJS('.btn', {
	        text: function() {
	            return 'menvscode.com'
	        }
	    });

	    clipboard.on('success', function(e) {
	        console.log(e);
	    });

	    clipboard.on('error', function(e) {
	        console.log(e);
	    });
    </script>
</body>
</html>

(3)方式三:data-clipboard-action="copy" data-clipboard-target=""

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://menvscode.com/public/js/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.js"></script>
</head>
<body>
    <span class="copy_content">menvscode.com - 前端博客</span>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target=".copy_content">Copy</button>
    <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>

(4)方法四:data-clipboard-action="cut" data-clipboard-target="#bar"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://menvscode.com/public/js/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.js"></script>
</head>
<body>
    <textarea id="bar">menvscode.com - 前端博客</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button> <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>

(5)方法五:data-clipboard-text=""

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://menvscode.com/public/js/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.js"></script>
</head>
<body>
    <button class="btn" data-clipboard-text="menvscode.com - 前端博客">复制</button>

    <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>

4、使用过程中的坑

本人在使用过程中,复制的按钮曾经使用的不是button标签。经测试发现安卓手机是没有问题,正常复制;但是在ios手机上,却不能实现复制功能;最后将复制按钮换成button就能解决问题,这一个 坑点大家留意一下就行。


标签: clipboard 复制
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码