Coding云

码云:超高性价比成熟源码系统及二次开发

java

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("群号复制成功");
    });

这样就搞定了。


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

这篇文章帮我解决问题了,我忍不住的想点赞!!!
同时也想小小的打赏一笔表示感谢。

已经有186位老爷赞赏了本文

打赏方式一:
打开支付宝,使用“扫一扫”打赏。
支付宝打赏
打赏方式二:
打开微信,使用“扫一扫”打赏。
微信打赏