夏日博客

A-A+

html+js实现点击拷贝文字功能

2018年02月27日 前端设计 评论 3 条 阅读 0 views 次

最近因为小红包商城手机版购买订单无法复制文字内容绞尽了脑汁，查看了一下，原来源代码全都禁止了复制的功能，也就是在手机端长按文字禁止拷贝，看了一下所加载的JS或者CSS，在多个地方都有禁止的功能，好了，索性直接在订单处添加一个按钮，点击之后就可以直接进行订单号的拷贝。

使用JS并不难实现这样的功能，遂直接从网上摘下一段html+js代码，修改一下即可应用，好了，代码如下:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.   </head>  
  7.   <style type="text/css">  
  8.     *{  
  9.       -webkit-user-select: auto;  
  10.     }  
  11.   </style>  
  12.   <body>  
  13.     <span id="content">  
  14.       你好，好久不见！  
  15.     </span>  
  16.     <button id="copyBT">复制</button>  
  17.     <script>  
  18.       function copyArticle(event) {  
  19.         const range = document.createRange();  
  20.         range.selectNode(document.getElementById('content'));  
  21.         const selection = window.getSelection();  
  22.         if(selection.rangeCount > 0) selection.removeAllRanges();  
  23.         selection.addRange(range);  
  24.         document.execCommand('copy');  
  25.         alert("复制成功！");  
  26.       }  
  27.       document.getElementById('copyBT').addEventListener('click', copyArticle, false);  
  28.     </script>  
  29.   </body>  
  30. </html>  

运行测试就不用多说了吧，直接在桌面新建一个.html文件，然后编辑内容，把这些代码拷贝进去，然后双击打开就可以看到效果了，同样的，修改一下，即可应用在任何的网页当中。

标签：

3 条留言  访客：3 条  博主：0 条

  1. Koolight 2018年03月19日 下午 11:04  -199楼  回复

    能给wp文章添加这个按钮才厉害！

    • smiling 2018年03月20日 上午 9:57  地下1层  回复

      这样的按钮很简单的，就是一段JS控制代码。

  2. 程序员爱好者 2018年02月27日 下午 4:30  -198楼  回复

    看到这个就头晕

给我留言