今天小编给大家分享一下兼容多浏览器的原生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%); }