禁止复制兼容input及各个版本浏览器

最新推荐文章于 2023-12-25 10:12:24 发布
原创 最新推荐文章于 2023-12-25 10:12:24 发布 · 431 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input禁止复制 禁止复制兼容样式

本文介绍了一种通过在HTML输入框中使用特定属性来禁用粘贴、复制、剪切等操作的方法，这对于保护敏感信息具有一定作用。

页面元素中设置    

<input type="text"  onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false" >
 






 














                

        

    

  



    



                



	

		

			

				
					
大数据Hadoop实战篇

				
			

			

				

					需要远程指导仿真实验、代码有问题的，请后台私信或者关注公众号
				

				

					06-04
					
					8688
					
				

			

		

		

			
				
大数据Hadoop实战，10分钟带你入门Hadoop，手把手教你搭建分布式集群系统

			
		

	



                

            
              



	

		

			

				
					
网页防复制，禁止文字选中，禁止右键菜单js代码，兼容大部分浏览器方法

				
			

			

				

					泥猴桃的博客
				

				

					12-22
					
					709
					
				

			

		

		

			
				
css文件中放入如下代码:body {
-moz-user-select : none;
-webkit-user-select: none;
}js文件中放入如下代码：function iEsc() {
    return false;
}function iRec() {
    return true;
}function DisableKeys() {
    if(event.ctrlK

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					零落依草木的博客
				

				

					01-06
					
					2191
					
				

			

		

		

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









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

复制代码代码示例:


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

			
		

	





	

		

			

				
					
[html] input如何在各个浏览器下保持UI统一？

				
			

			

				

					歌谣的博客
				

				

					04-04
					
					258
					
				

			

		

		

			
				
[html] input如何在各个浏览器下保持UI统一？
.ibutton { padding: 3px 15px; *padding: 0 15px; *height: 24px; font-size: 12px; text-align: center; text-shadow: #CF510B 0 1px 0; border:1px solid #ec5c0d; border-radius: 2px; background: #FC750A; background-image: -webkit-line

			
		

	



		

			
		



	

		

			

				
					
2020-06-08 html的input在各浏览器下保持ui统一 + css的flex遇到nowrap布局影响 + js的promise + 弹性工作机制

				
			

			

				

					在下魔王ii的博客
				

				

					06-08
					
					432
					
				

			

		

		

			
				
# 2020-06-08 题目来源：http://www.h-camel.com/index.html
# [html] input如何在各个浏览器下保持UI统一？
进行初始化样式，例如：
.input-button {
padding: 3px 15px;
*padding: 0 15px;
*height: 24px;
font-size: 12px;
text-ali...

			
		

	





	

		

			

				
					
禁止文本框粘贴功能【支持IE、Mozlla、Firefox等】

				
			

			

				

					weixin_30242907的博客
				

				

					06-02
					
					101
					
				

			

		

		

			
				
<body>
<script type="text/javascript">
//not IE is required
function fncKeyStop(evt)
{
if(!window.event)
{
var keycode = evt.keyCode;
var key = String.fromCharCode(keycode).toLower...

			
		

	





	

		

			

				
					
不同浏览器兼容问题—— input 添加required属性 firefox下输入框为红色 +禁止中文输入

				
			

			

				

					jspshuishui的专栏
				

				

					05-17
					
					6521
					
				

			

		

		

			
				
1、如果一个表单控件具有required属性，在chrome浏览器下显示正常，在Firefox浏览器中会加上一圈粉红色的边框，无法实现各个浏览器统一，尤其是当你将这个控件设置了不显示某些边框线的时候，要去除Firefox给有required属性的表单控件添加的边框，只需要添加一句CSS代码即可。

添加下列代码以后，具有required属性的input和textarea将不再自动添加粉红色边框

			
		

	





	

		

			

				
					
前端面试题之浏览器原理篇

				
			

			

				

					爱是与世界平行
				

				

					06-02
					
					2170
					
				

			

		

		

			
				
前端面试题之浏览器原理篇一、浏览器安全1.  什么是 XSS 攻击？（1）概念（2）攻击类型2. 如何防御 XSS 攻击？3. 什么是 CSRF 攻击？（1）概念（2）攻击类型4. 如何防御 CSRF 攻击？5. 什么是中间人攻击？如何防范中间人攻击？6. 有哪些可能引起前端安全的问题**?**7. 网络劫持有哪几种，如何防范？二、进程与线程1. 进程与线程的概念2. 进程和线程的区别3. 浏览器渲染进程的线程有哪些4. 进程之前的通信方式5. 僵尸进程和孤儿进程是什么？6. 死锁产生的原因？ 如果解决死锁

			
		

	





	

		

			

				
					
前端面试题

				
			

			

				

					IT_Jiangxiaobai的博客
				

				

					05-19
					
					5697
					
				

			

		

		

			
				
01-HTML~02-CSS
1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？

要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面
要点二 : 声明对大小写不敏感

2.常用浏览器有哪些，内核都是什么？
答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等




浏览器
内核
备注




IE
Trident
IE、猎豹安全、360极速浏览器、百度浏览器


firefo

			
		

	





	

		

			

				
					
【剪贴板功能实现深度剖析】：跨浏览器剪贴板操作的实战策略

				
			

			

				

					
				

			

		

		

			
				
![【剪贴板功能实现深度剖析】：跨浏览器剪贴板操作的实战策略]...首先介绍了剪贴板功能的基本概念和在不同浏览器中的兼容性问题，接着深入

			
		

	





	

		

			

				
					
【IE兼容性】background:transparent IE中Bug，不能选中input输入框，出现这个问题主要是IE8...

				
			

			

				

					weixin_33950035的博客
				

				

					04-30
					
					454
					
				

			

		

		

			
				


先解释下，background:transparent，默认在IE上会被解析成 background: none transparent scroll repeat 0% 0% 
transparent表示透明无颜色 
none 表示没有设置背景图片
repeat 表示图片反复
scroll 表示背景图片随浏览器下拉而滚动
0%水平位置在x0
0%垂直位置在y0



...

			
		

	





	

		

			

				
					
vue实现输入框粘贴图片自动上传图片

					
最新发布

				
			

			

				

					fakuangjingling的博客
				

				

					12-25
					
					1609
					
				

			

		

		

			
				
需求：用户粘贴截图或者复制的图片后，需要自动上传文件后端。思路：input输入自带的方法paste。根据文件类型来判定是不是图片，如果是图片就把文件上传到后端。

			
		

	





	

		

			

				
					
vue中阻止粘贴的实现

				
			

			

				

					前端打工人的博客
				

				

					07-28
					
					1642
					
				

			

		

		

			
				
需求: 阻止element组件中的的粘贴功能
实现思路: 组件是由外层和内层的组成的, 根据浏览器的事件传递机制(先捕获,后冒泡): 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可
代码实现:
<!-- handlePaste方法可以随意写 -->
<el-input v-model="input" 
  placeholder="请输入内容" 
  @paste.native.cap

			
		

	





	

		

			

				
					
阻止element组件中的<el-input/>的粘贴功能（转）

				
			

			

				

					dengling8319的博客
				

				

					05-21
					
					1185
					
				

			

		

		

			
				
需求: 阻止element组件中的<el-input/>的粘贴功能
实现思路: <el-input/>组件是由外层<div>和内层的<input>组成的, 根据浏览器的事件传递机制(先捕获,后冒泡): 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, ...

			
		

	





	

		

			

				
					
解决浏览器自动填充input（适用于elementui）

				
			

			

				

					Equicy的博客
				

				

					02-24
					
					4114
					
				

			

		

		

			
				
问题描述
登陆页面浏览器保存账号密码后，浏览器会自动在其他页面进行填充，原因是浏览器会默认填充input type值为password的输入框，即填充对象为input[type=password]即前一个input框。

解决方案
网上也有好多的解决办法，下面列几种，最后我们列出最优的解决方案

autocomplete
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键...

			
		

	





	

		

			

				
					
关于Vue开发中的一些踩坑记录(三)

				
			

			

				

					weixin_42833042的博客
				

				

					06-04
					
					939
					
				

			

		

		

			
				
一、async&await在生命周期中的使用
如果你希望在生命周期中做到阻塞异步，ES6中虽然提供了aysnc的语法糖，但是在钩子函数中使用是无法生效的，如：
async created(){
	await this.getList();
}
mounted(){
	this.format()
}
//这里依然会是执行完mounted()中的this.format()之后才执行this.g...

			
		

	





	

		

			

				
					
图片粘贴上传,预览——兼容ie（手动上传）和谷歌浏览器（粘贴或拖拽上传）(方法一)

				
			

			

				

					pearkerChen
				

				

					10-10
					
					2665
					
				

			

		

		

			
				
1.优化上传的css：


.img-class {
    width: 525px;
    height: 290px;
}

.img-paste-class {
    width: 530px;
    height: 330px;
}

.a-file {
    position: relative;
    display: inline-block;
    backgroun...

			
		

	





	

		

			

				
					
网站内容禁止复制和粘贴、另存为的js代码

				
			

			

				

					weixin_30642305的博客
				

				

					02-06
					
					900
					
				

			

		

		

			
				
1、使右键和复制失效 方法1： 在网页中加入以下代码：
 <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); <...

			
		

	





	

		

			

				
					
跨浏览器兼容的input框提示文字实现方法

				
			

			

				

					
				

			

		

		

			
				
为了在input元素中实现跨浏览器的提示文字（placeholder）效果，特别是在IE 8及以下版本的浏览器上，我们需要采用一些JavaScript技巧以及其他兼容性解决方案。下面，我将详细阐述如何在不支持placeholder属性的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值