移動端一般body的css、會設置 作用就不解釋了；
body{ height:100%;min-height:100%; font-family: "微軟雅黑",'Helvetica Neue',Helvetica,tahoma,arial,sans-serif; text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased; line-height: 1; font-size:14px;-webkit-touch-callout:none;-webkit-user-select:none;}
我們看看下面的代碼
<div style=" margin-top: 100px; background: #888;"> <p style="-webkit-user-select:text !important;line-height: 30px; padding: 10px; text-align: center; ">1移動端 suface復制文本測試啊 父類沒有 -webkit-user-select:text;;</p> </div>
以上代碼 手機iphone5s 的ios9 沒問題，可是換個iphone7 ios10的 出現 無法選中；
后來去掉所有css 樣式 js 發現
解決方案
1 去掉body的 -webkit-touch-callout:none;但是不切實際
2 其他能選文本復制的地方 （下面的） 的文本先手動選擇一下。然后再去選擇你要選的就可以了；不實際；
3后來發現必須 父元素加個-webkit-user-select:text;才有效，單獨子元素即使加-webkit-user-select:text!important也無效
<div style=" margin-top: 200px; background: #888;-webkit-user-select:text;;"> <p style="-webkit-user-select:text !important;line-height: 30px; padding: 10px; text-align: center; "> 2移動端 suface 復制文本測試啊 父類 加了-webkit-user-select:text;;</p> </div>
工作中的小問題，記錄一下；
另外，發現 手機 uc 彈窗出來的元素無法復制，
例如 這段 添加到一個 Dialog 里面的innerHTML, 卻無法復制，
<div style=" margin-top: 200px; background: #888;-webkit-user-select:text;;">
<p style="-webkit-user-select:text !important;line-height: 30px; padding: 10px; text-align: center; "> 2移動端 suface 復制文本測試啊 父類 加了-webkit-user-select:text;;</p>
</div>
之后發現動態添加的uc 瀏覽器 copy無效，需要設置 diologClass 的class， .cancopy div{-webkit-user-select:text;}
<div class="diologClass cancopy"><div style=" margin-top: 200px; background: #888;-webkit-user-select:text;;">
<p style="-webkit-user-select:text !important;line-height: 30px; padding: 10px; text-align: center; "> 2移動端 suface 復制文本測試啊 父類 加了-webkit-user-select:text;;</p>
</div></div>
移動端復制 解決方案 ，兼容性還行，參考 clipboard官網 https://clipboardjs.com 上，核心模塊 ，下面 copy 函數來自 clipboard；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> <link href="http://m.lrlz.com/h5/fcj/css/reset2.css" rel="stylesheet" type="text/css"> </head> <body> <style> .modal__dialog_bd{-webkit-user-select: text !important;user-select: text !important;} /*****************************************公共css end *******************************************************************/ .aa2aaa span{-webkit-user-select: text !important;user-select: text !important; } .percentBox{ position: relative; margin: 20px 0;;height: 2px; line-height: 2px;background-color: #eee;;} .percentInner{position: absolute; left: 0; top: 0; width: 10%; height: 2px; ; z-index: 14;; background-color: #1AAD19;} </style> <h3 style="text-align: center; margin: 10px auto ; font-size: 20px;;">點擊copy復制</h3> <P style="-webkit-user-select: text;user-select: text;"> <span id='copyContent' class="copyContent" >這是一段頁面aaa內容，點擊右側的按鈕復制</span> </P> <div id='copy' style="padding: 10px; margin: 40px auto;; border: 2px solid red;">點擊 copy</div> <p style="text-align: center; margin: 10px auto ; font-size:14px;;"><span id='info' style='color:red'></span></p> <div style="width: 90%; margin: 0 auto;"> <p>在此粘貼復制的內容</p> <textarea name="" id="" style="width: 100%; display: block;" cols="30" rows="10"></textarea> </div> <div id="asadd" style="padding: 10px; margin: 40px auto;; border: 2px solid red;">探礦復制</div> <p><span id='info2' style='color:red'></span></p> <div id="asadd2" style="padding: 10px; margin: 40px auto;; border: 2px solid red;">進度條顯示</div> <script src="//m.lrlz.com/h5/activity/msmember/js/common.min.js"></script> <script> function copyTxt(ele,success,fail){ ele.clientLeft; var succeeded=false; var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(ele); selection.removeAllRanges(); selection.addRange(range); try { if(document.execCommand("copy")==false){ succeeded = false; }else{ succeeded = true; } } catch (err) { succeeded = false; } if(succeeded){ success&&success.apply(this,arguments); }else{ fail&&fail.apply(this,arguments); succeeded=false; } return succeeded; } document.getElementById('copy').addEventListener('click', function() { document.getElementById('info').innerHTML = '' var copyresult= copyTxt(document.querySelectorAll('.copyContent')[0],function(){ document.getElementById('info').innerHTML = '復制成功--'+document.getElementById('copyContent').innerHTML+'--'+(+new Date) },function(){ document.getElementById('info').innerHTML = '復制失敗，請長按復制'+(+new Date) }); // alert(copyresult); }) document.getElementById('asadd').addEventListener('click', function() { var nowPre; var obj={ text: '<div class="aa2aaa" style=" position: relative; -webkit-user-select: text !important;user-select: text !important; padding:20px 0;"><span id="copyContent2" class="copyContent2" >這是彈框bbb--，點擊右側的按鈕復制'+(+new Date)+'</span></div>', title: '標題', //可省略 onShow: function (obj) { console.log(' onShow可省略',obj); nowPre=obj obj.querySelectorAll('.modal__dialog_bd')[0].style.webkitUserSelect="text !important" }, buttons: [{ //數組對象 //onConfirm label: '關閉', type:'default ', //默認primary default warning onClick: function () { // if(手機號碼不對){return false; } } //return false阻止彈窗關閉 } }, { //數組對象 //onConfirm label: '復制', type:'primary ', //默認primary default warning onClick: function (e,obj) { document.getElementById('info').innerHTML = '' var copyresult= copyTxt(document.querySelectorAll('.copyContent2')[0],function(){ document.getElementById('info2').innerHTML = '復制成功--'+document.getElementById('copyContent2').innerHTML; nowPre.querySelectorAll('.primary ')[0].innerHTML='復制成功'; },function(){ document.getElementById('info2').innerHTML = '復制失敗，請長按復制'+(+new Date); nowPre.querySelectorAll('.primary ')[0].innerHTML='請長按文本復制'; }); console.log(copyresult,"復制obj",e,obj); return false; } // if(手機號碼不對){return false; } } //return false阻止彈窗關閉 }], } modal.confirm(obj) }); document.getElementById('asadd2').addEventListener('click', function() { var nowPre; var jdtHtml='<div id="j_percentBox" class="percentBox "><div class="percentInner j_percentInner"></div></div>' var timer=null; var sum=0; var obj={ text: jdtHtml, title: '清楚緩存進度條', //可省略 onShow: function (obj) { console.log(' onShow可省略',obj); nowPre=obj obj.querySelectorAll('.del23')[0].innerHTML="刪除中"; var j_percentBox=obj.querySelector("#j_percentBox"); var j_percentInner=j_percentBox.querySelector(".j_percentInner"); //console.log(j_percentBox,j_percentInner); timer=setInterval(function(){ sum++; if(sum<100){ j_percentInner.style.width=sum+"%"; }else{ sum=0; clearInterval(timer); j_percentInner.style.width="100%" obj.querySelectorAll('.del23')[0].innerHTML="已清楚"; modal.toast('已清楚緩存', { duration: 1000, type: 'success', //默認"tip" 設置樣式 success fail warning loading preloader busy callback: function(){ modal.close(); //主動關閉彈窗 }, // style: "background:#fff,color:red", }); } },10); }, buttons: [{ //數組對象 //onConfirm label: '關閉', type:'default ', //默認primary default warning onClick: function () { // if(手機號碼不對){return false; } } //return false阻止彈窗關閉 sum=0; clearInterval(timer); } }, { //數組對象 //onConfirm label: '復制', type:'primary del23 ', //默認primary default warning onClick: function (e) { console.log("進度條確定",e); var nowstatus=nowPre.querySelectorAll('.del23')[0].innerHTML; if(nowstatus=="刪除中") { // modal.toast("刪除中"); console.log("進度條可以刪除中，不可關閉"); return false; }else{ console.log("進度條可以刪除，到達100%"); //modal.close(); } } // if(手機號碼不對){return false; } } //return false阻止彈窗關閉 }], } modal.confirm(obj) }); </script> </body> </html>
移動端 彈框 進度條
點擊關閉，直接取消；
進度未到100% 點擊 刪除中 不可以關閉，
到達100%，點擊 已清楚 可以關閉，現在設置到達100% 自動關閉；
核心代碼如下
document.getElementById('asadd2').addEventListener('click', function() {
var nowPre;
var jdtHtml='<div id="j_percentBox" class="percentBox "><div class="percentInner j_percentInner"></div></div>'
var timer=null;
var sum=0;
var obj={
text: jdtHtml,
title: '清楚緩存進度條', //可省略
onShow: function (obj) {
console.log(' onShow可省略',obj);
nowPre=obj
obj.querySelectorAll('.del23')[0].innerHTML="刪除中";
var j_percentBox=obj.querySelector("#j_percentBox");
var j_percentInner=j_percentBox.querySelector(".j_percentInner");
//console.log(j_percentBox,j_percentInner);
timer=setInterval(function(){
sum++;
if(sum<100){
j_percentInner.style.width=sum+"%";
}else{
sum=0;
clearInterval(timer);
j_percentInner.style.width="100%"
obj.querySelectorAll('.del23')[0].innerHTML="已清楚";
modal.toast('已清楚緩存', {
duration: 1000,
type: 'success', //默認"tip" 設置樣式 success fail warning loading preloader busy
callback: function(){
modal.close(); //主動關閉彈窗
},
// style: "background:#fff,color:red",
});
}
},10);
},
buttons: [{ //數組對象 //onConfirm
label: '關閉',
type:'default ', //默認primary default warning
onClick: function () { // if(手機號碼不對){return false; } } //return false阻止彈窗關閉
sum=0;
clearInterval(timer);
}
},
{ //數組對象 //onConfirm
label: '復制',
type:'primary del23 ', //默認primary default warning
onClick: function (e) {
console.log("進度條確定",e);
var nowstatus=nowPre.querySelectorAll('.del23')[0].innerHTML;
if(nowstatus=="刪除中") {
// modal.toast("刪除中");
console.log("進度條可以刪除中，不可關閉");
return false;
}else{
console.log("進度條可以刪除，到達100%");
//modal.close();
}
} // if(手機號碼不對){return false; } } //return false阻止彈窗關閉
}],
}
modal.confirm(obj)
});
關於 更多彈窗 api .....