A-A+

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

2018年02月27日 web前端设计 评论 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

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

    • smiling

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

  2. 程序员爱好者

    看到这个就头晕

给我留言

Copyright © 夏日博客 保留所有权利.   Theme  Ality 冀ICP备15026943号-3

用户登录