js移动端实现网站内容复制粘贴功能

Html

Css


    
        
            
                1.老公做错事被老婆一顿数落，后互相不答理，直到她放了一个屁，老公紧接着也放了一个后，老婆：“哟，还敢顶嘴？”。
            
            
            
        
        
            
                2.人的一生都会扮演很多角色，如果你不高兴，你可以把剧本扔了。不过记住，有一份剧本是真真属于你的，千万别丢错了。
            
            
            
        
        
            
                3.现在演戏的都去唱歌了，唱不了歌的都去写书了，写不了书的都去演戏了，演不了戏的就又去唱歌了。演艺圈是个圈嘛。

  body {
	max-width:640px;
	margin:0 auto;
}
ul,li {
	list-style:none;
	padding:0;
	margin:0;
}
.copy-demo {
	width:100%;
	height:auto;
	overflow:hidden;
}
.li {
	padding:20px;
	border-bottom:1px solid #f0f0f0;
	overflow:hidden;
}
.copy-pp {
	color:#666;
	line-height:1.2;
}
.copy-btn {
	background-color:cornflowerblue;
	color:#fff;
}
.copy-text {
	opacity:0;
}

// 复制文案功能:
const jsCopy = function(obj) {

function fn() {
        var u = navigator.userAgent;
        //苹果
        if (u.match(/(iPhone|iPod|iPad);?/i)) { //ios
            //   alert('苹果啊');
            //要复制文字的节点
            var copyDOM = obj.parentNode.firstChild.nextElementSibling;

var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(copyDOM);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');
            try {
                var msg = successful ? 'successful' : 'unsuccessful';
                console.log('copy is' + msg);
            } catch (err) {
                console.log('Oops, unable to copy');
            }
            // 移除选中的元素
            window.getSelection().removeAllRanges();
            obj.innerHTML = '已复制'

//obj.setAttribute('data-state','yes');

}
        // 安卓
        if (u.indexOf('Android') > -1) {
            // alert('安卓啊');
            var $copyPP = obj.parentNode.firstChild.nextElementSibling,
                $copyText = obj.parentNode.lastChild.nextElementSibling;
            $copyText.innerHTML = $copyPP.innerHTML.replace(/<[^>]+>/g, "");

$copyText.select(); // 选择对象

document.execCommand("Copy"); // 执行浏览器复制命令

obj.innerHTML = '已复制';
        }
        // 安卓系统的UC浏览器
        if (u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1) {
            obj.innerHTML = '点击复制文案';
            alert('若点击复制文案无效，请长按内容手动复制！');
        }
    }

obj.addEventListener('click', fn, false);
};

//
let copyBtns = document.querySelectorAll('.js-copy-btn');
copyBtns.forEach((obj) => {
    jsCopy(obj);

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js移动端实现网站内容复制粘贴功能



代码描述：使用前：先调试到手机模式哦，js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件

开发需求：移动端，点击按钮实现需复制的文本内容；
使用前：先调试到手机模式；案例已做手机端浏览器兼容处理经测试，[qq，微信，苹果，360，uc等]，可正常使用；

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?Summer

相关代码

js移动端实现网站内容复制粘贴功能

最新