今天小编给大家分享一下兼容多浏览器的原生js复制函数copyText怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
JS复制文本到剪切板 copyText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<span class="orange" id="shareUrl" data-url="www.baidu.com">www.baidu.com</span>
<script>
// 复制
function copyText(text) {
var textArea = document.createElement("textarea");
// textArea.style['display']='none'
textArea.style['position'] = 'absolute'
textArea.style['top'] = '0'
textArea.style['left'] = '0'
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log(msg)
} catch (err) {
console.error('复制失败', err);
}
document.body.removeChild(textArea);
if (successful) {
return true
}
};
$(function() {
var shareUrl = $("#shareUrl").data("url");
$("#shareUrl").click(function() {
var shareUrl = $("#shareUrl").data("url");
if (copyText(shareUrl)) {
alert("复制成功");
}
})
})
</script>
</body>
</html>删减后的代码，减少了判断，其实上面的代码是非常好的
function copyText (text) {
//生成一个textarea对象
var textArea = document.createElement('textarea');
//设置属性
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
//添加到页面body
document.body.appendChild(textArea);
textArea.select();
//执行
var msg = document.execCommand('copy') ? '成功' : '失败';
Popup('复制内容' + msg);
//移除对象
document.body.removeChild(textArea);
}
function Popup(message){
var span=document.createElement('span')
span.innerHTML=message || 'default'
span.className='popupStyle'
span.style.display='block'
document.body.appendChild(span)
setTimeout(()=>{
span.remove()
},1000)
}对了不要忘了css样式
.popupStyle{
width:180px;
height:50px;
background-color: rgb(85,85,85);
/* display:none; */
color:#fff;
text-align:center;
line-height:50px;
border-radius:5px;
padding:0;
position:fixed;
z-index:1;
top:30%;
left:50%;
transform:translateX(-50%);
}
