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

最新推荐文章于 2021-11-06 20:17:54 发布
最新推荐文章于 2021-11-06 20:17:54 发布
阅读量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
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

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

				
			

			

				

					09-25
				

			

		

		

			
				
禁止选中文字在某些场景下还是有必要的，比如不想让他人复制自己的文章之类的。这时候我们可以通过使用CSS+JS来解决这一问题。另外，这边要指出的是，user-select目前还不是W3C的正式标准，各个浏览器都是以私有属性...

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					09-05
				

			

		

		

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

			
		

	



                


  
              

                


	

		

			

				
					
禁止选择网页中的文字

				
			

			

				

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

				

					05-20
					
					277
					
				

			

		

		

			
				
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
					
					949
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					fk478561641的博客
				

				

					09-10
					
					2374
					
				

			

		

		

			
				
关于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
					
					531
					
				

			

		

		

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

			
		

	





	

		

			

				
					
游览器禁止选中问题

				
			

			

				

					aixuner1002的博客
				

				

					09-25
					
					414
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
vue实现页面内容禁止选中功能,仅输入框和文本域可选

				
			

			

				

					12-13
				

			

		

		

			
				
上网上翻了翻，共找到两种... /*webkit浏览器*/  -khtml-user-select:none; /*早期浏览器*/  -moz-user-select:none;/*火狐*/  -ms-user-select:none; /*IE10*/  user-select:none; } input{  -webkit-user-select:au

			
		

	





	

		

			

				
					
html禁止网页文字复制

				
			

			

				

					08-20
				

			

		

		

			
				
标题"html禁止网页文字复制"所涉及的核心技术就是如何通过HTML和JavaScript（特别是jQuery库）来实现这一功能。接下来，我们将深入探讨如何实现这个功能，并提供相关代码示例。  首先，HTML本身并不具备直接禁止文本...

			
		

	





	

		

			

				
					
wordpress禁止复制内容的实现方法

				
			

			

				

					09-29
				

			

		

		

			
				
 这段代码会阻止右键菜单的显示，并且禁止选中内容。  3. 接下来，添加以下CSS样式，以禁止在火狐浏览器中选取内容：  ```html    body{-moz-user-select:none;}    ``` 4. 最后，为了防止框架嵌套攻击（iframe），...

			
		

	





	

		

			

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

				
			

			

				

					qq_29207823的博客
				

				

					11-06
					
					641
					
				

			

		

		

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

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

HTML5 引入的新属性

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

			
		

	





	

		

			

				
					
页面文字无法选中？

				
			

			

				

					weixin_33816821的博客
				

				

					05-06
					
					663
					
				

			

		

		

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

			
		

	





	

		

			

				
					
前端网页禁止选中文字的方法

				
			

			

				

					梦幻般的菜鸟的博客
				

				

					05-12
					
					5514
					
				

			

		

		

			
				
侧边导航栏内容太多太多太多，使用滚动条印象美观，
决定使用鼠标拖拽效果来滑动，但是会出现选中文字的情况，
禁止选中的方法很简单，
可以直接在标签里添加
onselectstart="return false;"



举个例子

    adasdasdasdasdasdasdad

			
		

	





	

		

			

				
					
禁止浏览器默认复制文字/选中文字等

				
			

			

				

					零落依草木的博客
				

				

					01-06
					
					1970
					
				

			

		

		

			
				
本文介绍下，用jquery实现禁用右键，文本选择，以及复制按键的代码，有需要的朋友，参考下吧。









以下代码兼容IE、firefox、谷歌浏览器。
 

复制代码代码示例:


//禁用右键、文本选择功能、复制按键  
$(document).bind(“contextmenu”,function(){return false;});  
$(do

			
		

	





	

		

			

				
					
获取浏览器选中文本并操作

				
			

			

				

					davr75714的博客
				

				

					09-18
					
					639
					
				

			

		

		

			
				
<h3>你想不想知道用户选中了哪些信息？</h3>
        <ol>
            <li>
                window.getSelection()：返回Selection对象，其中toString()方法返回选中的文本信息；
                <pre>
   ...

			
		

	





	

		

			

				
					
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、付费专栏及课程。

              

            

          

      

      余额充值