最近给运营人员做了个微信html5的刮奖活动页面，上线以后，用户反馈了一些问题，于是运营人员让我们给加点小功能，就是给中奖列表那里加个点击复制qq群号的按钮。

如图：

这样，当用户获奖后，点击复制群号，就可以直接到qq软件里粘贴后查找qq群了。

但是从百度搜了一圈后，发现基本不好使，有个方法是window的粘贴板方法，但是只能用在ie内核的浏览器上，还有个方法如下:

$("#qqQunCopyBtn1").on('click',function(){
	var e=document.getElementById("awardQqQun1");//对象是content
        e.select(); //选择对象
        document.execCommand("Copy"); //执行浏览器复制命令
        alert("群号复制成功");
    });

后面这个方法只能复制input输入框的内容，但是起码还能用。百度还查到了些引入插件的方法，但是也有各种限制，所以还是想办法用这个input输入框的复制功能更好些。

然而input输入框的这个复制方法也有问题，那就是input框只能是type="text"，而且input框也不能设置style="display:none;"的样式，然后又是各种调啊，最后想到了一个办法，绕过了这种限制。

那就是让input框所在的div被其他div覆盖，这样的话input框也相当于对用户隐形了。然后就完美实现了这个功能。

具体相关代码如下：

首先用大背景图的div覆盖input所在的div

然后加一个button

点击复制群号

给button加一个点击事件

$("#qqQunCopyBtn1").on('click',function(){
		var e=document.getElementById("awardQqQun1");//对象是content
        e.select(); //选择对象
        document.execCommand("Copy"); //执行浏览器复制命令
        alert("群号复制成功");
    });

这样就搞定了。

(转载本站原创文章请注明作者与出处Coding云--codingyun.com)