【项目心得】在微信网页上的点击按钮复制功能

来源：互联网发布：怎么通过网络挣钱编辑：程序博客网时间：2024/05/16 10:01

这里写图片描述
这几天做的一个h5项目，遇到了上图的这种需求，点击按钮复制框框里面的内容。一开始是使用JS原生的写法，核心语句是：
document.execCommand(“Copy”);
以及xxx.select();
但是浏览器一直报错提示select() is not a function…
仔细查找原因后，发现是由于我用div模拟了文本框的实现,但select()只能用于input框，因此修改之后可以正常复制了。然而，此方法适用于安卓系统，在ios上不起效。
代码如下：

function copy(){            var copyTarget = document.getElementById('copyTarget');            copyTarget.select();            document.execCommand("Copy");        }

clipboard插件

为了兼容ios系统，尝试使用了clipboard.js。
官方网站戳这里https://clipboardjs.com/
下面放一个官网上的点击按钮复制div的内容的例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>target-div</title>    <meta name="viewport" content="width=device-width, initial-scale=1"></head><body>    <!-- 1. Define some markup -->    <div>hello</div>    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>    <!-- 2. Include library -->    <script src="../dist/clipboard.min.js"></script>    <!-- 3. Instantiate clipboard -->    <script>    var clipboard = new Clipboard('.btn');    clipboard.on('success', function(e) {        console.log(e);    });    clipboard.on('error', function(e) {        console.log(e);    });    </script></body></html>

关键是要给按钮添加data-clipboard-action=”xxx”以及 data-clipboard-target=”xxx”,data-clipboard-target最好等于目标复制对象的类名。
此方法可以兼容ios系统，然而在安卓上又失效了。。。

同时兼容iOS以及Android

综上所述，要兼容这两大系统，同时使用JS原生的方法以及clipboard.js插件即可。

input框的优化

用户不能编辑input里面的内容，因此可以添加readonly=”readonly”属性，同时为了防止手机输入框的弹出，可以添加onclick=”this.blur();”，使输入框失去焦点。
示例：

<input type="text" class="className" id="idName" value="要复制的内容" readonly="readonly"  onclick="this.blur();"></input>

以上是本次项目完成过程中的小小心得，我这个前端的小菜鸟还在四处碰壁中，希望大家多多补充自己的意见噢~

阅读全文

1 0