開發需求：手機端，點選按鈕實作需複制的文本内容；
案例已做手機端浏覽器相容處理經測試，[QQ，微信，蘋果，360，UC等]，可正常使用；
案例代碼如下：****（使用時：請調試到手機模式）
案列1：單個複制
<!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);
// 執行 copy 操作
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>
案列2：多個複制
<!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;}
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;}
</style>
</head>
<body>
<!--使用時：請調試到手機模式：-->
<!--copy-demo-->
<section class="copy-demo">
<ul class="ul">
<li class="li">
<div class="copy-pp" >
1.上得了廳堂，下得了廚房，殺得了木馬，翻得了圍牆，開得了汽車，買得起洋房，鬥得了小三，打得赢流氓。
</div>
<button type="button" class="copy-btn js-copy-btn">點選複制文字</button>
<textarea class="copy-text" value="" readonly="readonly"></textarea>
</li>
<li class="li">
<div class="copy-pp" >
2.人的一生都會扮演很多角色，如果你不高興，你可以把劇本扔了。不過記住，有一份劇本是真真屬于你的，千萬别丢錯了。
</div>
<button type="button" class="copy-btn js-copy-btn">點選複制文字</button>
<textarea class="copy-text" value="" readonly="readonly"></textarea>
</li>
<li class="li">
<div class="copy-pp" >
3.現在演戲的都去唱歌了，唱不了歌的都去寫書了，寫不了書的都去演戲了，演不了戲的就又去唱歌了。演藝圈是個圈嘛。
</div>
<button type="button" class="copy-btn js-copy-btn">點選複制文字</button>
<textarea class="copy-text" value="" readonly="readonly"></textarea>
</li>
</ul>
</section>
<script type="text/javascript">
// 複制文案功能:
const jsCopy = function(obj) {
function fn() {
var u = navigator.userAgent;
//蘋果
if (u.match(/(iPhone|iPod|iPad);?/i)) { //ios
// alert('蘋果啊');
//要複制文字的節點
var copyDOM = obj.parentNode.children[0];
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 = '已複制'
}
// 安卓
if(u.indexOf('Android') > -1 ){
//alert('安卓啊');
var $copyPP = obj.parentNode.children[0],
$copyText = obj.parentNode.children[2];
$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);
});
</script>
ps:
js複制頁面内容-圖檔文字-插件clipboard.js
vue-仿淘寶收貨位址，設定預設位址
源碼會持續更新到公衆号，需要可以關注一下哦…
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)