至2023年最好用的兼容多瀏覽器的原生js復制函數copyText
更新時間:2023年05月02日 16:39:18 作者:前端白雪
因為后臺需要增加一些復制一些內容非表單中內容,那么下面這個函數就非常的好用了,其實也是利用了表單的數據權限比較容易突破,下面是具體的實現(xiàn)函數,大家可以拿走
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(); //執(zhí)行 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%); }
對于之前的一些代碼,可以當個學習參考,原生js實現(xiàn)。
您可能感興趣的文章:
- JavaScript實現(xiàn)一鍵復制文本功能的示例代碼
- Web js實現(xiàn)復制文本到粘貼板
- 使用js實現(xiàn)復制功能
- 使用?JS?復制頁面內容的三種方案
- JavaScript實現(xiàn)一鍵復制內容剪貼板
- js復制文本到粘貼板(Clipboard.writeText())
- JS實現(xiàn)一鍵復制
- Vue中使用highlight.js實現(xiàn)代碼高亮顯示以及點擊復制
- js實現(xiàn)復制粘貼的兩種方法
- JavaScript+Html5實現(xiàn)按鈕復制文字到剪切板功能(手機網頁兼容)
- JS實現(xiàn)復制內容到剪貼板功能兼容所有瀏覽器(推薦)
- js實現(xiàn)點擊復制當前文本到剪貼板功能(兼容所有瀏覽器)
- 簡單實現(xiàn)兼容各大瀏覽器的js復制內容到剪切板
- JavaScript 實現(xiàn)完美兼容多瀏覽器的復制功能代碼
- 兼容主流瀏覽器的JS復制內容到剪貼板
- js實現(xiàn)的復制兼容chrome和IE
- 兼容所有瀏覽器的js復制插件Zero使用介紹
- 用js將內容復制到剪貼板兼容瀏覽器
- js復制網頁內容并兼容各主流瀏覽器的代碼
- JS復制內容到剪切板的實例代碼(兼容IE與火狐)
- JS/FLASH實現(xiàn)復制代碼到剪貼板(兼容所有瀏覽器)
- 多瀏覽器兼容性比較好的復制到剪貼板的js代碼
- GWT中復制到剪貼板 js+flash實現(xiàn)復制 兼容性比較好
- 兼容IE與Firefox的js 復制代碼
- JavaScript 復制功能代碼 兼容多瀏覽器
相關文章
淺析C/C++,Java,PHP,JavaScript,Json數組、對象賦值時最后一個元素后面是否可以帶逗號
這篇文章主要介紹了淺析C/C++,Java,PHP,JavaScript,Json數組、對象賦值時最后一個元素后面是否可以帶逗號的相關資料,需要的朋友可以參考下2016-03-03PNGHandler-借助JS讓PNG圖在IE下實現(xiàn)透明(包括背景圖)
PNGHandler-借助JS讓PNG圖在IE下實現(xiàn)透明(包括背景圖)...2007-08-08bootstrap datetimepicker實現(xiàn)秒鐘選擇下拉框
這篇文章主要為大家詳細介紹了bootstrap datetimepicker添加秒鐘選擇下拉框的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01javascript實現(xiàn)信息的顯示和隱藏如注冊頁面
信息的顯示和隱藏在某些時候還是比較使用的,就比如注冊信息,下面有個不錯的示例,感興趣的朋友可以了解下2013-12-12firefox TBODY 用js顯示和隱藏時出現(xiàn)錯位的解決方法
今天幫別人寫一個網頁,發(fā)現(xiàn):當用javascript動態(tài)設置tr.style.display = "block"顯示某行時,使用IE瀏覽沒有問題,但使用firefox瀏覽時該行被移到了其它行的后面,很是詫異。2008-12-12