移动端 -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;}
我们看看下面的代码
<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 .....
移动端 -webkit-user-select:text; ios10 bug 解决方案的更多相关文章
- 解决easyui combobox赋值boolean类型的值时,经常出现的内容显示的value而不是text的bug
版本:EasyUI 1.7.0 在用easyui写项目时,碰到一个combobox的奇葩bug.代码如下: <div> <select class="easyui-comb ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- vue h render function & render select with options bug
vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...
- jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案
jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...
- Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案
Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案,ext 的CheckboxSelectionModel在后台默认选中之后,前台就不允许编辑的bug是存 ...
- 为什么我没有拔出钥匙 ——开锁引发的程序bug解决方案的思考
http://blog.csdn.net/wojiushiwo987/article/details/8851204为什么我没有拔出钥匙 ——开 ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- 小程序输入框闪烁BUG解决方案
前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...
- 移动端中遇到的坑(bug)!!!
1.模拟单选点击的时候,在ios手机下,点击下面的内容选择,会出现页面闪一闪!! 解决方案:样式重置html的时候加上这句 -webkit-tap-highlight-color: rgba(0, ...
随机推荐
- PHP中域名绑定
1.如果是集成环境,比如phpstudy则可以直接在工具中点击其他选项菜单->站点域名管理填好对应的域名和站点目录后点击新增,然后点击保存设置并生成配置文件,然后再打开hosts文件,增加对应的 ...
- 【读书笔记】【深入理解ES6】#7-Set集合和Map集合
ES6新标准中将Set集合和Map集合添加到JS中. ES5中Set集合和Map集合 在ES5中,开发者们用对象属性来模拟这两种集合. var set = Object.create(null); s ...
- python2.7源码编译安装
最近学习docker容器,因为平时用的linux发型版都是centos6系列,所有pull了一个centos:6.6的景像,运行景像,进入容器后,发现其默认的python环境是2.6,为了更好的兼容我 ...
- Java想要学到精通,这几点一定要掌握
时代更新换代速度如此之快,尤其是深处互联网行业的java程序员,技术更需要不断更新,只有及时充电,才能不被市场淘汰.千锋Java培训老师今天为大家分享Java程序员学习的6个小技巧. 1.书籍永远是知 ...
- 《SpringMVC从入门到放肆》一、概述
一.SpringMVC概述 View Service Dao DB Spring MVC interface interface Mysql impls impls SpringMVC也叫Spring ...
- UVA 11292 Dragon of Loowater(简单贪心)
Problem C: The Dragon of Loowater Once upon a time, in the Kingdom of Loowater, a minor nuisance tur ...
- Codeforces Round #356 (Div. 1) C. Bear and Square Grid
C. Bear and Square Grid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...
- April Fools Contest 2017 题解&源码(A,数学 B,数学 C,数学 D,字符串 E,数字逻辑 F,排序,卡时间,G,数学)
A. Numbers Joke time limit per test:2 seconds memory limit per test:64 megabytes input:standard inpu ...
- Codeforces Round #442 (Div. 2)
A. Alex and broken contest time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...