H5点击复制到粘贴板

H5点击复制到粘贴板

 

功能场景

h5页面需要点击复制内容，到手机的粘贴板。

运用插件clipboard

插件下载地址：clipboard官网

插件使用

	//html部分
	<div class="btn">点我复制</div>
	<input id="title1" type="text" value="复制功能测试" readonly="readonly" />

	//js部分
    function copymsg() {
    	var Url2 = document.getElementById("title1");//要复制文字的节点
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
            window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(Url2);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');

            // 移除选中的元素
            window.getSelection().removeAllRanges();
        } else {
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
        }
    }
    $(".btn").click(function() {
        	copymsg();
    });

注意事项

这里的input可以换成div但是写法会有所区别，详细见官网介绍。
个人建议用input，因为这个兼容性最好。还有input标签内容不能opacity:0,也不能display:none;它必须在页面中显示。
我的做法是，让它字体颜色、input背景颜色都与页面背景色一致。这样就能解决这个兼容问题了。

 

来源：https://www.cnblogs.com/lafitewu/p/9503866.html