记忆盒子

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

首页搜索目录
search
当前主题: 互联网络

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)里的文字。

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

查看演示

演示文件下载

x

标签: ZeroClipboard  clipboard.js  

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

  • 扩展阅读
上一篇: 判断网站有无使用百度云加速的两个方法
下一篇: svg实现的世界地图轮廓【附源代码】

发表评论:

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

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

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

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

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