小强博客 - Adolph Blog
  • 黑帽SEO之301权重传递
  • DedeCMS手机站搜索模板制作
  • 《三十六计》完整版,图文并茂
  • 为什么每个互联网职业者都因该有一个博客?
  • localhost与127.0.0.1的区别
  • PC/移动,点击复制功能clipboard.js

    2018-04-09 23:29

    因为在做一个小玩意儿,需要用到在移动端,点击复制功能,问了下小泽,给我甩了个链接,研究一番,初识clipboard.js,clipboard.js是一个不需要flash,将文本复制到剪切板的js插件,来记录下,怎么用。

    在头部引用以下两个js:

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

    HTML源码如下:

    <span id="target">111111111122222222222222222233333333333333333444444444444</span>
    <a class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">点我复制</a>

    最后的触发js

    <script>
    $(document).ready(function(){
    var clipboard = new Clipboard('#copy_btn');
    clipboard.on('success', function(e) {
    alert("复制成功",1500);
    e.clearSelection();
    console.log(e.clearSelection);
    });
    });
    </script>

    就可以实现啦,clipboard.js官方点我,代码并不复杂,data-clipboard-target绑定的是目标标签,如果你只是复制一段固定的内容,也可以在触发器元素里添加data-clipboard-text属性(demo中即a);data-clipboard-action属性有两个值,一个是copy复制一个是cut剪切,但是剪切只在<input>或<textarea>中生效,默认值是copy。

    除了复制用户输入的内容,固定内容,还可以用户分享链接等......

    完整dome地址:http://www.timeandevent.com/shiyan/001/

    dome下载:http://www.timeandevent.com/shiyan/001/dome.zip

    博主简介
    小强博客 - Adolph Blog

    小强哥Adolph

    我有一个梦想,且一直在为它努力!

    1990年人士,8年互联网经验。
    商业服务
  • (1)黑白帽SEO高端外包服务
  • (2)黑白帽SEO高端顾问
  • (3)中大型程序开发
  • (4)中大型数据库优化与开发
  • (5)高端培训(技术 & 思维 & 关门弟子)
  • (6)指定网站入侵扫描 & 安全检测
  • (7)指定服务器入侵扫描 & 安全检测
  • (8)黑灰色项目承接 & 合作 & 顾问
  • (9)开源CMS二次开发与BUG修复
  • (10)开源CMS模版设计开发与仿站
  • (11)小 & 中 & 大型网站从零开发
  • (12)品牌解决方案
  • (13)销量解决方案
  • (14)顾问与培训解决方案
  • 联系方式
  • QQ:97028048
  • 微信:zjkszq1990 & zZ683135
  • E-mail:adolph@timeandevent.com
  • 微博文

      我相信,错过了,仍然有机会补救。

      2019-02-18 17:33:04

      问我这个年过得咋样?你怎么不问问去年呢?

      1

      2019-02-04 10:31:55

      粘人的小妖精。。。

      1

      2019-01-28 15:37:54

      1d1d2fe1fea4328d3fa3964a22287356

      2018-12-07 17:02:32

      有时候,我们真的是无法选择。

      2018-12-05 11:44:36

      ee75005344645cb4a2d8c62cdd14b1f3

      2018-11-29 12:11:24

      wx_camera_1543335310011

      2018-11-28 02:38:07

      有些事。真的需要时间沉淀。急性子,是做不来的

      2018-11-25 07:59:56

      5e6297095fc025542d5a31b1dcf8c7e9

      2018-11-25 02:43:20

      36a2c4f3606e85ee52e9770daf942c37

      2018-11-25 02:07:29

      今天这小饭馆,大厨不在,她的姐姐在,我来了说,小伙子,吃什么呀,我只会炒米饭和煮面条[捂脸][捂脸][捂脸],我以为逗我呢,结果一看其他人,吃的不是炒米饭就是煮面条。。。

      2018-11-09 18:28:23

      1

      睡觉了。。。晚安。

      2018-10-12 00:53:08

      推荐首歌曲,Despacito,不错。。。点我去听听

      2018-10-11 11:52:51

      哈哈哈,小仙女IMG_20180911_154710

      2018-09-14 03:48:22