js屏蔽退格键(backspace或者叫后退键与F5)


Posted in Javascript onFebruary 10, 2019

没有绝对的屏蔽,最好是js结合服务端混合用。服务端通过判断要打开的页面的参数是否第一次打开,如果不是的话就跳转到指定页面。这里只说js方法。

我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说退格键(backspace/ 后退键),我在一个项目中就遇到过在页面编辑的时候禁用掉退格键,因为退格键会发生页面后退,这样编辑的内容都会失去了,非常的恶心人。ok ,废话少说,直接上代码。

比较好的代码,处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外

<script type="text/javascript"> 
 
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 
function banBackSpace(e){  
 var ev = e || window.event;//获取event对象  
 var obj = ev.target || ev.srcElement;//获取事件源  
  
 var t = obj.type || obj.getAttribute('type');//获取事件源类型 
  
 //获取作为判断条件的事件类型 
 var vReadOnly = obj.getAttribute('readonly'); 
 var vEnabled = obj.getAttribute('enabled'); 
 //处理null值情况 
 vReadOnly = (vReadOnly == null) ? false : vReadOnly; 
 vEnabled = (vEnabled == null) ? true : vEnabled; 
  
 //当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
 //并且readonly属性为true或enabled属性为false的,则退格键失效 
 var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
    && (vReadOnly==true || vEnabled!=true))?true:false; 
  
 //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
 var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") 
    ?true:false;   
  
 //判断 
 if(flag2){ 
  return false; 
 } 
 if(flag1){  
  return false;  
 }  
} 
 
//禁止后退键 作用于Firefox、Opera 
document.onkeypress=banBackSpace; 
//禁止后退键 作用于IE、Chrome 
document.onkeydown=banBackSpace; 
 
</script>

使用方法:把上面的js代码放到<head></head>之间就ok了

下面是其它网友的补充

<script type="text/javascript">
javascript:window.history.forward(1);//禁用回退(比如:当前在B页面,点击后退会退回到A页面,那么该代码写在A页面,然后在B页面就不会回退到A了)
</script>

<script type="text/javascript">
//禁止后退键 作用于Firefox、Opera 
document.onkeypress=banBackSpace;
//禁止后退键 作用于IE、Chrome 
document.onkeydown=banBackSpace;
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 
function banBackSpace(e){ 
var ev = e || window.event;//获取event对象 
var obj = ev.target || ev.srcElement;//获取事件源 
var t = obj.type || obj.getAttribute('type');//获取事件源类型 
//获取作为判断条件的事件类型 
var vReadOnly = obj.getAttribute('readonly'); 
var vEnabled = obj.getAttribute('enabled'); 
//处理null值情况 
vReadOnly = (vReadOnly == null) ? false : vReadOnly; 
vEnabled = (vEnabled == null) ? true : vEnabled; 
//当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
//并且readonly属性为true或enabled属性为false的,则退格键失效 
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && (vReadOnly==true || vEnabled!=true))?true:false; 
//当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false; 
//判断 
if(flag2){ 
return false; 
} 
if(flag1){ 
return false; 
} 
} 

</script>

屏蔽F5

<script type="text/javascript">
//屏蔽F5
document.onkeydown = function(e){
e = window.event || e;
var keycode = e.keyCode || e.which;
if(e.ctrlKey || e.altKey || e.shiftKey
|| keycode >= 112 && keycode <= 123){
if(window.event){// ie
try{e.keyCode = 0;}catch(e){}
e.returnValue = false;
}else{// ff
e.preventDefault();
}
}
}
//屏蔽右键
document.oncontextmenu = function(e){
return false;
}
</script>

这篇文章就介绍到这了,需要的朋友可以参考一下

Javascript 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 #Javascript
JavaScript ES6常用基础知识总结
Feb 09 #Javascript
Vue组件的使用及个人理解与介绍
Feb 09 #Javascript
Vue自定义指令写法与个人理解
Feb 09 #Javascript
Vue指令指令大全
Feb 09 #Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 #Javascript
vue计算属性get和set用法示例
Feb 08 #Javascript
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
php处理带有中文URL的方法
2016/07/11 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python中使用psutil查看内存占用的情况
2018/06/11 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
英语生日邀请函
2014/01/23 职场文书
阿德的梦教学反思
2014/02/06 职场文书
西式结婚主持词
2014/03/14 职场文书
周年庆促销方案
2014/03/15 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
校庆接待方案
2014/03/18 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
节能环保演讲稿
2014/08/28 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
windows系统搭建WEB服务器详细教程
2022/08/05 Servers