您的位置：首页 > 移动开发 > 微信开发

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

2017-08-29 17:37 330 查看

这几天做的一个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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信网页开发复制-html5-微信

相关文章推荐

新的分享

章节导航