排列五现场直播:记忆盒子

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

首页搜索目录
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-2018 All Rights Reserved. 粤ICP备14028160号-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2018 All Rights Reserved.
  • 毒贩电话遥控贩毒被抓 以为不碰毒品就没事 2018-12-18
  • 中国端午节文化走进韩国校园 2018-12-18
  • 武汉首创应届生申请大学生租赁房 2018-12-17
  • 亳州女婴喝贝因美奶粉尿液不正常 厂家:有问题再负责 2018-12-16
  • 昌平区--北京频道--人民网 2018-12-16
  • 不一样的角度 带你领略昭苏巴勒克苏大草原 2018-12-15
  • 邓紫棋首任明星制作人 吴亦凡身兼二职 2018-12-14
  • 广图:神“摄”手初养成计划:摄影师爸爸成长篇 2018-12-13
  • 紫光阁中共中央国家机关工作委员会 2018-12-13
  • 中共中央组织部“12380”举报网站 2018-12-12
  • 回复@海之宁:你要懂逻辑会看不懂这篇帖子? 2018-12-11
  • 人民日报今日谈:莫把基金当奖金 2018-12-11
  • 老年人社保年审如何更便利 2018-12-10
  • 时间放宽了,考核更难了 2018-12-10
  • 尚活 —频道 春城壹网 七彩云南 一网天下 2018-12-09
  • 377| 401| 128| 644| 710| 650| 217| 673| 409| 577|