各浏览器禁止选中文字方法

最新推荐文章于 2023-01-25 14:55:11 发布
最新推荐文章于 2023-01-25 14:55:11 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： 兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31029729/article/details/49760007
版权

各浏览器禁止选中文字各自有个的方法。


代码

<!DOCTYPE html>
<html>
<body>
<divunselectable="on" style="background:#ccc;">unselectable="on"</div>
<br/>
<div style="background:#ccc;-webkit-user-select:none;">-webkit-user-select:none;</div>
<br/>
<div style="background:#ccc;-moz-user-select:none;">-moz-user-select:none;</div>
<br/>
<div style="background:#ccc;"onselectstart="return false;">onselectstart="return false;"</div>
</body>
</html>


效果

 		 
Chrome Safari
 		 
Firefox
 		 
IE
 		 
Opera
 
 
unselectable="on"
 		 
  no  
 		 
  no  
 		 
  yes  
 		 
  yes  
 
 
-webkit-user-select:none;
 		 
  yes  
 		 
  no  
 		 
  no  
 		 
  no  
 
 
-moz-user-select:none;
 		 
  no  
 		 
  yes  
 		 
  no  
 		 
  no  
 
 
onselectstart="return false;"
 		 
  yes  
 		 
  no  
 		 
  yes  
 		 
  no  
 
 

 



 


 
 


 
 


 
 


 
 


 
 

 

总结
 

给标签设置样式-moz-user-select:none;-webkit-user-select:none;，同时标签设置unselectable="on"，保证各个浏览器都能禁止选中文字。

                

        

        

    




    

      

        

            

              
                
                  卯野芽衣子
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
js鼠标移动时禁止选中文字

				
			

			

				

					10-20
				

			

		

		

			
				
首先，禁止选中文字主要是通过CSS来完成的。我们可以添加一个全局样式，覆盖整个HTML文档，以防止任何部分的文字被选中。以下是一种常见的实现方式：  ```css html, body {  -webkit-touch-callout: none; /* 针对...

			
		

	



                

              
                



	

		

			

				
					
鼠标移动div时禁止选中div中的文字的方法

				
			

			

				

					09-25
				

			

		

		

			
				
综合以上，通过CSS和JavaScript的结合，我们可以有效地在鼠标移动div时禁止选中div中的文字，从而保证div移动的流畅性。这在创建交互式用户界面或拖放功能时尤其有用，可以提供更好的用户体验。

			
		

	



                


  
              

                


	

		

			

				
					
禁止选择网页中的文字

				
			

			

				

					知其白，守其黑；和其光，同其尘。
				

				

					05-20
					
					278
					
				

			

		

		

			
				
onselectstart和onselect的使用
1.onselectstart
这个事件主要是用于禁止选择网页中的文字。代码为：
document.onselectstart =function(){
            return false;
}


　　另外ff/opera不支持此事件，ff可以用css控制：css: body { -moz-user-select: none; }。webkit浏览器可以使用“-khtml-user-select”，当然也可以使用onselectstart事

			
		

	





	

		

			

				
					
解决FF和safari下文本禁止选择的问题

				
			

			

				

					
				

				

					08-17
					
					951
					
				

			

		

		

			
				
解决FF和safari下文本禁止选择的问题作者:jsrpg 日期:2006-11-03字体大小: 小 中 大   					               							  众所周知，在IE下面可以采用onselectstart和ondrag方式实现文本的禁止选择功能，但是在FF和safari下面却是不可使用，可以采用以下方法，完全是CSS的功劳： 程序代码bod

			
		

	



		

			
		



	

		

			

				
					
IE浏览器禁止文字选中，禁止图片拖拽，禁止缩放。

				
			

			

				

					fk478561641的博客
				

				

					09-10
					
					2383
					
				

			

		

		

			
				
关于IE浏览器的一些简单设置。

一.禁止文字选中有两种方式：css和js.推荐使用js方式

css:


body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-selec...

			
		

	





	

		

			

				
					
禁止浏览器选中文本（就一句话，总是忘，记一下）

				
			

			

				

					不明所以
				

				

					09-10
					
					532
					
				

			

		

		

			
				
元素添加属性   onselectstart="return false"

			
		

	





	

		

			

				
					
游览器禁止选中问题

				
			

			

				

					aixuner1002的博客
				

				

					09-25
					
					418
					
				

			

		

		

			
				
本文为转载文章，转载地址为https://www.feiniaomy.com/post/169.html
CSS属性禁止网页文字被选中
CSS3中有个user-select属性，这个属性可以设置某个DIV元素中的文本不被选中，下面就详细的说一下
CSS3中user-select属性

css属性user-select介绍
这个user-select有四个值，分别为：none | text | al...

			
		

	





	

		

			

				
					
通过CSS规则禁止选中文字的实现代码

				
			

			

				

					09-25
				

			

		

		

			
				
总结来说，禁止选中文字可以通过CSS的`user-select`属性结合不同浏览器的前缀实现，对于老版本的IE浏览器则需使用JavaScript配合`unselectable`属性和事件监听。虽然`user-select`并非官方标准，但它在实际应用中已...

			
		

	





	

		

			

				
					
禁止选中文字兼容IE、Chrome、FF等

				
			

			

				

					09-05
				

			

		

		

			
				
本文将详细讲解如何实现跨浏览器的禁止选中文字功能，确保兼容IE、Chrome、Firefox（FF）等主流浏览器。  首先，我们可以使用JavaScript的jQuery库来实现这一功能。通过以下代码，可以给指定元素（假设为`el`）添加...

			
		

	





	

		

			

				
					
Ctrl+A 只选中div中的内容，而不选择页面全部

				
			

			

				

					qq_29207823的博客
				

				

					11-06
					
					650
					
				

			

		

		

			
				
今天碰见一个需求，要求Ctrl+A只选中div中的内容
搜索以后发现给div添加contenteditable属性是个不错的方法

contenteditable 元素属性
默认属性: false
可选属性: true | false

HTML5 引入的新属性

还有可以通过onselectstart, onselect 事件来控制用户选择
但是实现起来比较麻烦，所以我选择了使用contenteditable
...

			
		

	





	

		

			

				
					
页面文字无法选中？

				
			

			

				

					weixin_33816821的博客
				

				

					05-06
					
					666
					
				

			

		

		

			
				
转载于:https://www.cnblogs.com/LLLLily/p/10821349.html

			
		

	





	

		

			

				
					
解决网页中文字无法选中的问题

				
			

			

				

					m0_56077202的博客
				

				

					01-25
					
					5681
					
				

			

		

		

			
				
解决网页中文字无法选中的问题

			
		

	





	

		

			

				
					
浏览器文本无法选中（以及火狐浏览器的兼容）

				
			

			

				

					Ink_cherry的博客
				

				

					11-23
					
					3173
					
				

			

		

		

			
				
很多时候 浏览器上的文本被莫名其妙的选中出现蓝色文本，很是厌倦
解决办法是
一般的浏览器加 这一句 就是div标签内部的文本不能被选中


火狐浏览器不支持上一句 onselectstart 
 

要加上后面这一个css style

			
		

	





	

		

			

				
					
CSS禁止鼠标拖动选择文字

				
			

			

				

					足迹
				

				

					09-11
					
					4579
					
				

			

		

		

			
				
在一些精品课程网站中，客户会提出不允许别人复制自己的东西，也就是说，不允许选中和复制页面内容，通过CSS的实现方法是：在body的样式中，增加如下代码：

			
		

	





	

		

			

				
					
解决网页文字无法选中或复制

					
热门推荐

				
			

			

				

					weixin_42312511的博客
				

				

					09-08
					
					3万+
					
				

			

		

		

			
				
我们在查看一些网页时会遇到不能复制的问题，或者鼠标无法选中文字，导致不能复制。



这时候我们按下键盘的F12，点击console控制台，输入以下代码后回车即可


var eles = document.getElementsByTagName('*');
for (var i = 0; i < eles.length; i++) {
    eles[i].style.userSele...

			
		

	





	

		

			

				
					
css设置页面文字不能被选中

				
			

			

				

					芊芊寻的博客
				

				

					11-01
					
					2万+
					
				

			

		

		

			
				
实现
通过css实现页面文字不能被选中
.cannotselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select...

			
		

	





	

		

			

				
					
设置禁止文字被选中

				
			

			

				

					mentalitys的博客
				

				

					08-15
					
					944
					
				

			

		

		

			
				

.main{
    moz-user-select: -moz-none; 
    -moz-user-select: none; 
    -o-user-select:none; 
    -khtml-user-select:none; 
    -webkit-user-select:none; 
    -ms-user-select:none; 
    user-select:...

			
		

	





	

		

			

				
					
css 禁止鼠标选中文字

					
最新发布

				
			

			

				

					06-09
				

			

		

		

			
				
当我们需要在网页中展示一些内容时，有时候我们并不希望用户可以选中其中的文字，这时候我们可以使用CSS的user-select属性来禁止用户选中文字，示例代码如下：

```
<style>
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>

<div class="no-select">这段文字不能被选中</div>
```

在上面的代码中，我们给需要禁止选中的元素添加了一个class名为`no-select`，并使用了CSS的user-select属性，将其值设置为`none`，这样用户就无法选中其中的文字了。需要注意的是，user-select属性在不同的浏览器中可能会有不同的前缀，所以我们需要添加多个前缀来兼容不同的浏览器。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值