移动端 -webkit-user-select:text; ios10 bug 解决方案

本文介绍了解决移动端复制文本难题的方法,并提供了一个兼容性良好的实现方案。此外,还分享了一种实现移动端弹窗进度条的方式,包括如何通过JavaScript控制进度条的更新和弹窗的交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

移动端一般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>
View Code

 

 

 

  

 

 

移动端 弹框 进度条

点击关闭,直接取消;

进度未到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 .....

 



转载于:https://www.cnblogs.com/surfaces/p/6432712.html

### 使用 `user-select:text` 实现文本可选效果 在网页开发中,通过设置 CSS 属性 `user-select` 的值为 `text` 可以使特定区域内的文本内容能够被用户选中。这一功能对于提升用户体验至关重要,尤其是在移动设备上。 #### 设置全局文本可选 为了让整个页面上的所有文本都可以被选中,在 HTML 文档的 `<style>` 标签内部定义如下规则: ```css * { -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } ``` 这段代码确保了无论是在 Firefox (-moz-)、WebKit 浏览器 (如 Chrome 和 Safari, -webkit-) 还是 Internet Explorer/Edge (-ms-) 中都能正常工作[^1]。 #### 针对单个元素应用 如果只需要让某个具体部分的内容支持文本选择操作而不影响其他地方,则可以在目标容器标签里直接加入相应的样式声明: ```html <div style=" margin-top: 200px; background-color:#888; -webkit-user-select:text; "> <p> 移动端 Surface 复制文本测试啊 父类 加了 `-webkit-user-select:text`; </p> </div> ``` 值得注意的是,仅给子节点添加该属性可能不会达到预期的效果,因此建议总是优先考虑向父级元素施加此样式[^2]。 #### 考虑浏览器兼容性 由于不同浏览器间可能存在差异化的实现方式,所以在实际项目中应当同时提供多种前缀版本来保证尽可能广泛的适用范围。例如上面的例子就包含了 WebKit 内核特有的 `-webkit-` 版本以及标准写法 `user-select`。 #### 示例代码片段 这里给出一段完整的 HTML+CSS 组合示例,展示了如何利用 `user-select:text` 来创建一个易于选取文字的段落: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Text Selection Example</title> <style> .textSelectable { -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } </style> </head> <body> <h2 class="textSelectable">这是一个可以轻松选中的标题</h2> <p class="textSelectable">这是一些容易被高亮并复制的文字。</p> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值