js点击复制文本,兼容各种终端

分享一个js复制文本的函数,兼容web、wap、微信等多终端html。之前因为有项目需要用到点击文本直接复制功能,找了很多都是用jq的扩展或者用其他扩展js引入的,但是效果并不是很好用。

现在分享一个目前用得比较顺手的方法:

function copy() {
	const range = document.createRange();
	range.selectNode(document.getElementById('wxNumber'));//需要复制的内容
	const selection = window.getSelection();
	if(selection.rangeCount > 0) selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand('copy');
	alert("复制成功!打开微信添加好友");
}


指定其他的对象也可以的:

function copy() {
    var className = 'content';

    const range = document.createRange();
    range.selectNode(document.getElementsByClassName(className)[0]);//需要复制的内容,需要的是range
    const selection = window.getSelection();
    if(selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    layer.msg("复制成功!",{icon:6,time:1000});
}


自己优化升级版,自带提示

/**
 * 复制内容
 * @param obj 复制的对象,如this
 * @param className 根据类查询
 * @param expire 毫秒
 */
function copy(obj,className,expire) {

    if (!expire){
        expire = 1000;
    }
    const range = document.createRange();
    const selection = window.getSelection();
    if (className && className !=='undefined'){
        range.selectNode(document.getElementsByClassName(className)[0]);//需要复制的内容,需要的是range
    }else {
        range.selectNode(obj); //需要复制的内容
    }
    if (selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');

    var bsClassName = 'bs-alert-copy';
    var p= document.createElement('p');
    p.className = bsClassName;
    p.innerHTML = '<p class="" style="position: fixed; top: 30%;left: 45%; text-align: center; vertical-align: middle; background: #0000006e;color: white; padding: 10px;border-radius: 2px;">复制成功</p>';
    document.getElementsByTagName('body')[0].append(p);
    var node = document.getElementsByClassName(bsClassName)[0]
    setTimeout(function () {
        document.getElementsByTagName('body')[0].removeChild(node)
    },expire)

}

//使用方式1

<span onclick="copy(false,'tihuo-code',2000)" class="tihuo-code">628248</span>

//使用方式2
<span onclick="copy(this)" class="tihuo-code">628248</span>


评论/留言