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用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
工伤事故证明
2014/10/20 职场文书
嘉宾邀请函
2015/01/31 职场文书
小学四年级作文之写景
2019/08/23 职场文书