移动端一般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 解决方案的更多相关文章
	

    
								
  1. 解决easyui combobox赋值boolean类型的值时，经常出现的内容显示的value而不是text的bug
		
    版本:EasyUI 1.7.0 在用easyui写项目时,碰到一个combobox的奇葩bug.代码如下: <div> <select class="easyui-comb ...
    
		
    2. 
						
  2. jquery 获取下拉框值与select text
		
    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
    
		
    3. 
						
  3. 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  ...
    
		
    4. 
						
  4. jqueryeasyUI dialog 弹出窗口超出浏览器，导致不能关闭的bug解决方案
		
    jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...
    
		
    5. 
						
  5. Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案
		
    Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案,ext 的CheckboxSelectionModel在后台默认选中之后,前台就不允许编辑的bug是存 ...
    
		
    6. 
						
  6. 为什么我没有拔出钥匙 ——开锁引发的程序bug解决方案的思考
		
    http://blog.csdn.net/wojiushiwo987/article/details/8851204为什么我没有拔出钥匙                             ——开 ...
    
		
    7. 
						
  7. modal 弹框遮罩层，滚动穿透bug 解决方案
		
    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
    
		
    8. 
						
  8. 小程序输入框闪烁BUG解决方案
		
    前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...
    
		
    9. 
						
  9. 移动端中遇到的坑（bug）！！！
		
    1.模拟单选点击的时候,在ios手机下,点击下面的内容选择,会出现页面闪一闪!! 解决方案:样式重置html的时候加上这句  -webkit-tap-highlight-color: rgba(0,  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. findhex
			
    FindPattern(hD3D, 0x128000, (PBYTE)"\xC7\x06\x00\x00\x00\x00\x89\x86\x00\x00\x00\x00\x89\x86&qu ...
    
			
    2. 
						
  2. Vue + iView + vuex + vee-validate 完整项目总结
			
    build/*.js config/*.js src/旧代码文件夹 部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都 ...
    
			
    3. 
						
  3. PHP获取DHCP分配的本机IP
			
    在搭建本地环境的时候,需要用到多个设备,有服务器.打印机连接接设备等.因为DHCP动态分配IP,所以每次重连都会发生IP地址的变更. 解决办法就是将每个设备的本机IP上传到统一的地方保存.因为使用RE ...
    
			
    4. 
						
  4. metasploit联动beef启动
			
    (温馨提示:请按照步骤来,否则beef到后面会启动不了) 我们首先进入vim /usr/share/beef-xss/config.yaml 找到metasploit把它改为启动 把false改为tr ...
    
			
    5. 
						
  5. Gym 100952F&&2015 HIAST Collegiate Programming Contest F. Contestants Ranking【BFS+STL乱搞(map+vector)+优先队列】
			
    F. Contestants Ranking time limit per test:1 second memory limit per test:24 megabytes input:standar ...
    
			
    6. 
						
  6. [51nod1676]无向图同构
			
    如果一个无向图重标号后与另一个无向图完全一致(即对于任意两点,他们之间的边在两个图中都存在或都不存在),则称两个无向图同构. 给定两个n个点m条边的无向图,判定两个无向图是否同构.不超过20组数据,n ...
    
			
    7. 
						
  7. HDU2689-Sort it-冒泡排序
			
    Sort it Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
    
			
    8. 
						
  8. [国嵌攻略][072][Linux应用程序地址布局]
			
    程序构成 代码段.数据段.BSS段(Block Started by Symbol,又叫:未初始化数据段).堆(heap)和栈(stack).这些部分构成了Linux应用程序的重要组成部分. 内存布局 ...
    
			
    9. 
						
  9. web框架前言与学生数据库系统（附1.0源码）
			
    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. import socket def f1(request): ""&quo ...
    
			
    10. 
						
  10. 审计日志中的AOP
			
    审计跟踪(也称为审核日志)是一个安全相关的时间顺序记录,记录这些记录的目的是为已经影响在任何时候的详细操作,提供程序运行的证明文件记录.源或事件 MVC 自定义一个过滤器 public class A ...
    
			
    11.