ZeroClipboard过时了,js复制插件clipboard.js无需flash文件 - 记忆盒子

记忆盒子

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

河北福彩排列5大小走势图搜索目录
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)里的文字。

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

查看演示

演示文件下载

标签: ZeroClipboard  clipboard.js  

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

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

发表评论:

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

订阅博客                   QQ交流群(312716741)

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

Search

最新评论及回复

最近留言

网站分类

Powered By Designed by Han'space

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

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2019 All Rights Reserved.
福彩双色球周日走势图 河北福彩20选5五位走势图 体彩超级大乐透后区除三走势图 河北福彩排列七走势图带连线 河北福彩排列5大小走势图齐鲁风采23选5和值走势图 体彩排列5双期走势图 体彩排列3出号频率表 齐鲁风采23选5斜三连号分布图 浙江体彩20选5走势图带连线 福彩双色球周四走势图 体彩排列3单期走势图 江苏体彩七位数走势图 江苏体彩七位数走势图 南粤风采36选7尾数走势图 浙江体彩6 1走势图 体彩排列3和值走势图 浙江体彩20选5走势图 体彩排列5大小分析 江苏体彩七位数大小分析 南粤风采36选7单期走势图