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

【项目心得】在微信网页上的点击按钮复制功能_第1张图片
这几天做的一个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的内容的例子:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-divtitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
    
    <div>hellodiv>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copybutton>

    
    <script src="../dist/clipboard.min.js">script>

    
    <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”属性,同时为了防止手机输入框的弹出,可以添加οnclick=”this.blur();”,使输入框失去焦点。
示例:

type="text" class="className" id="idName" value="要复制的内容" readonly="readonly"  οnclick="this.blur();">

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

你可能感兴趣的:(项目总结)