移动端 -webkit-user-select:text; ios10 bug 解决方案
移动端一般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;}
我们看看下面的代码
1移动端 suface复制文本测试啊 父类没有 -webkit-user-select:text;;
以上代码 手机iphone5s 的ios9 没问题，可是换个iphone7 ios10的 出现 无法选中；
后来去掉所有css 样式 js 发现
解决方案
1 去掉body的 -webkit-touch-callout:none;但是不切实际
2 其他能选文本复制的地方 （下面的） 的文本先手动选择一下。然后再去选择你要选的就可以了；不实际；
3后来发现必须 父元素加个-webkit-user-select:text;才有效，单独子元素即使加-webkit-user-select:text!important也无效
2移动端 suface 复制文本测试啊 父类 加了-webkit-user-select:text;;
工作中的小问题，记录一下；
另外，发现 手机 uc 弹窗出来的元素无法复制，
例如 这段 添加到一个 Dialog 里面的innerHTML, 却无法复制，
2移动端 suface 复制文本测试啊 父类 加了-webkit-user-select:text;;
之后发现动态添加的uc 浏览器 copy无效，需要设置 diologClass 的class， .cancopy div{-webkit-user-select:text;}
2移动端 suface 复制文本测试啊 父类 加了-webkit-user-select:text;;
移动端复制 解决方案 ，兼容性还行，参考 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;">点击 copydiv>
<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: '这是弹框bbb--，点击右侧的按钮复制'+(+new Date)+'',
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=''
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=''
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)
});