html点击阅读详细内容,html中用js或jquery的单击事件复制文本内容

最近给运营人员做了个微信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("群号复制成功");

});

这样就搞定了。