移動端複製功能
阿新 • • 發佈:2018-11-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="screen-orientation" content="portrait"> <meta name="format-detection" content="telephone=no"> <meta name="browsermode" content="application"> <meta name="x5-page-mode" content="app"> <title>手機端複製功能</title> <style> body{ max-width: 640px; margin: 0 auto;} .copy-pp{ color: #666; line-height: 1.2;} .copy-btn{ background-color: cornflowerblue; color: #fff;} .copy-text{ opacity: 0;} </style> </head> <body> <div class="copy-pp" id="copy-pp"> 用手機測試用手機測試用手機測試用手機測試用手機測試 用手機測試用手機測試用手機測試用手機測試用手機測試 用手機測試用手機測試用手機測試用手機測試用手機測試 </div> <button type="button" class="copy-btn" id="copy-btn" onclick="jsCopy(this)">複製</button> <textarea class="copy-text" id="copy-text" value="" readonly="readonly"></textarea> <script> function jsCopy(obj){ var u = navigator.userAgent; //蘋果 if (u.match(/(iPhone|iPod|iPad);?/i)) { var copyDOM = document.getElementById("copy-pp"); var range = document.createRange(); range.selectNode(copyDOM); window.getSelection().addRange(range); var successful = document.execCommand('copy'); try { var msg = successful ? '成功' : '失敗'; console.log(msg); } catch(err) { console.log(err); } window.getSelection().removeAllRanges(); obj.innerHTML = '已複製'; } // 安卓 if(u.indexOf('Android') > -1 ){ var $copyText = document.getElementById("copy-text"), $copyPP = document.getElementById("copy-pp"); $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('若點選複製無效,請長按內容手動複製!'); } } </script> </body> </html>