记忆盒子

把记忆装进灰色的盒子，封装起来，那年那月，重新拾起。

导航

ZeroClipboard过时了，js复制插件clipboard.js无需flash文件

作者:Kaka 时间:2018-2-15 2:32:5 浏览: 评论:0

说到js复制插件，大部分人用的应该是ZeroClipboard了，但是ZeroClipboard插件有一个弊端，就是必须要用到一个flash文件，这无论是在插件的加载效率还是使用体验上，都是不够完美的。那么有没有一个不用flash文件的js复制插件呢？答案是有的，那就是本文要介绍的clipboard.js。

实例代码

target-input.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

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

<script>
var clipboard = new Clipboard('.btn');
</script>
</body>
</html>

代码解释及使用方法：

先下载clipboard.js文件，放到网站某一个目录下。点击下载。

使用时html代码要先引用clipboard.js文件，注意路径要写对，引用写法是：

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

在后面要实例化Clipboard，写法是：

<script>
var clipboard = new Clipboard('.btn');
</script>

复制input输入框里的文字的写法：

<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

这里有三个地方要写对：

1）input的id要与button的data-clipboard-target的值一致，这个例子是foo。

2）button的class的值要与后面实例化Clipboard的写法new Clipboard('');一致，这个例子是btn。

3）button的data-clipboard-action的值是copy。

clipboard.js丰富强大的复制功能

clipboard.js具有丰富强大的复制功能，除了上面介绍的复制input输入框里的文字之外，还可复制textarea里的文字，可复制某一个div里的文字。此外，还可以通过event事件返回任何文本复制到剪贴板里，也可以通过event事件复制任何标签（比如div）里的文字。

所有这些复制功能都能在本文的演示页面里找到。

演示文件下载

海外云主机

低至54元 - 可退款

x

标签: ZeroClipboard clipboard.js

※ 网站速度慢？试试网站自动优化工具 ※

扩展阅读

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

订阅博客 QQ交流群（312716741）

Search

SEO专题

热门文章

最近发表

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

记忆盒子 - 卡卡测速网 - 卡卡教程库
网站测速 - Ping测试 - 路由追踪 - 网站诊断

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.