双胆神算排列三预测:记忆盒子

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

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

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

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

排列5预测最准十专家 www.82hpn.com.cn 说到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 Z-Blog 1.8 Walle Build 91204 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.
  • 2018年文化和自然遗产日专题 2019-05-26
  • “百名专家走进盟市旗县科普传播行”活动通辽站启动 2019-05-26
  • 泰国力争今年吸引1000万中国游客 2019-05-25
  • 卡赛首站启动 欧马可S3助力危化品运输 2019-05-24
  • 看到101的Yamy 终于知道单眼皮怎么化眼妆了 2019-05-23
  • 2018中国双一流大学专业排行榜发布 清华大学位列第一 2019-05-23
  • 回复@老老保老张工:计划不要批准?那不还是你自己做主?有必要走形式么? 2019-05-22
  • 新华社评论员:聚焦新目标 开启新征程 2019-05-22
  • 香港田径锦标赛飞人夺冠 2019-05-21
  • 我要讨干嘛?姜太公钓鱼,愿者上钩。 2019-05-20
  • 古村旅行地中国国家地理网 2019-05-20
  • 四届市委第五轮巡察工作动员部署会召开 杨文英黄玉剑讲话 2019-05-19
  • 机关党建工作巡礼——甘肃“走前头作表率” 2019-05-19
  • 为了民族复兴·英雄烈士谱 2019-05-18
  • 外贸创新举措 让开放惠及世界 2019-05-18
  • 293| 646| 552| 178| 808| 639| 428| 872| 643| 279|