腾讯云服务器优惠活动华纳云香港服务器

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

WordPress主题推荐

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

WordPress通过JS实现一键复制指定内容教程-第1张-boke112百科(boke112.com)

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 部分。

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

赞 (0) 打赏
版权声明:本文为转载文章,来源于 安利君 ,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
香港云主机55元/年
wu