WordPress通过JS实现一键复制指定内容教程

投稿   安利君  2017-10-30 07:29:21  137 人阅读  28 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

经常会见到网站上各种“一键复制”的友好体验按钮,不局限于code 的复制,这样友好的体验,方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制,毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。阅读数十篇文章中可偏偏没有 WordPress 的插件,或者是纯代码,奈何只能自己来操作。倒腾了有 2 天多,在朋友的帮助下,实现了“一键复制指定内容”的功能,也将代码集成在文章编辑器中,也还是很方便了。

WordPress通过JS实现一键复制指定内容教程 WordPress 第1张

WordPress实现一键复制指定内容步骤

1、下载 clipboard.js 文件。clipboard.js 是一个 github 上的开源项目,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

PS:以本站下载压缩包中的clipboard.min.js和amazeui.css文件为例说明。

2、将以下代码放在 footer.php ,其中 clipboard.min.js路径请自行修改。

  1. <script src="JS路径" type="text/javascript"></script>
  2. <script>
  3. var clipboard = new Clipboard( '.itemCopy' );
  4. clipboard.on('success', function(e){
  5. if(e.trigger.disabled == false ||
  6. e.trigger.disabled == undefined) {
  7. e.trigger.innerHTML="复制成功";
  8. e.trigger.disabled = true;
  9. setTimeout(function() {
  10. e.trigger.innerHTML="一键复制";
  11. e.trigger.disabled = false;
  12. },2000);
  13. }
  14. });
  15. clipboard.on('error', function(e) {
  16. e.trigger.innerHTML="复制失败";
  17. });
  18. </script>

3、在 header.php 头部引入以下 amazeui.css 文件。以下 amazeui-2.css 文件引入的是无删减版,大家也可以使用压缩包里面的 amazeui.css 文件,自行选择即可。

  1. <link rel="stylesheet" href="https://tu2.aitao779.com/amazeui-2.css ">

4、在文章中引用按钮代码。在编写文章的时候,将代码放在合适的位置,把 data-clipboard-text 的值“复制的内容”修改成指定的内容即可。

  1. <button class="itemCopy am-btn am-btn-warning am-round am-btn-xs" id="TKLS"  type="button" data-clipboard-text="复制的内容">一键复制</button>

建议把这个功能集成到主题编辑器中,方便操作。如果对代码比较模糊不懂修改 CSS 代码的话建议不要修改中间的 id 和 class 部分。

到这里差不多就完成了,说实话我自己都觉得有点粗糙。但是在摸索的路上收获颇多。也希望路过的大佬们,来指点和优化下代码。做出更好更方便的复制功能。具体效果请前往本文原地址下方点击『一键复制』按钮试试效果。

历史上的今天:

文章标签: ,   ,   ,  
原文地址:https://www.anliyun.cn/655.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 安利君 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

 发表评论


  1. 心动
    心动 【进士】 @回复

    非常好的功能,收了!感谢分享!

  2. 优选汇
    优选汇 【书童】 @回复

    这个非常不错

  3. 九哥
    九哥 【进士】 @回复

    现在很多博客都禁止右键,有这个方法确实能方便点。

  4. Koolight
    Koolight 【尚书】 @回复

    现在很多人都禁止复制了,博主还方便分享他人,赞!

  5. 一伍一拾
    一伍一拾 【举人】 @回复

    这个非常不错

  6. 小萝博客
    小萝博客 【状元】 @回复

    还是简单点好

  7. 初夏
    初夏 【书童】 @回复

    还有这种操作 [赞]

  8. 笛声
    笛声 【秀才】 @回复

    使用场景没说清楚啊

  9. 闲鱼
    闲鱼 【状元】 @回复

    基本上提供给别人复制的内容大多是代码,很多使用代码实现高亮的都会自己去集成复制功能

    • 懿古今
      懿古今【村长】2017-10-30 15:56  回复

      @闲鱼目前发现这个功能最有用的地方就是一键复制密码之类的,比如百度云盘的密码

  10. 土鳖哥
    土鳖哥 【秀才】 @回复

    感谢分享。支持一下

  11. 小白seo博客
    小白seo博客 【秀才】 @回复

    不用也要顶一下

  12. 投资巴士
    投资巴士 【书童】 @回复

    可以,但是有必要加上吗 ,个人感觉作用不大

    • 懿古今
      懿古今【村长】2017-10-30 15:57  回复

      @投资巴士某些特殊场合用得到,比如经常分享有密码的云盘分享之类的,可以直接一键复制密码之类的,挺好

  13. 橘子书
    橘子书 【丞相】 @回复

    其实,一键复制一般适用代码类的。
    然而,现在很多代码高亮的js文件已经将copy功能集合进去了。

  14. 网赚乎
    网赚乎 【举人】 @回复

    这个功能还是不错的,很方便。

  15. 沈唁志
    沈唁志 【秀才】 @回复

    在WordPress的路上一去不复返。

  16. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    这个有用,特别是用来作淘客复制淘口令的。

  17. 很文博客
    很文博客 【秀才】 @回复

    先学习一下,网页这东西,还是精简点为好!

  18. 里维斯社
    里维斯社 【进士】 @回复

    不错,感谢分享!

  19. 小苍老师
    小苍老师 【状元】 @回复

    这个可以有!今天晚上试试!

  20. 明月登楼学习笔记
    明月登楼学习笔记 【进士】 @回复

    [偷笑] 过来看看,可惜我的是 Typecho !

  21. 明月登楼的博客
    明月登楼的博客 【王爷】 @回复

    不错,受教了,多谢分享!
    先做个沙发! [呵呵]