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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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代码
2008/04/09 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
Javascript Objects详解
2014/09/04 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
企业诚信承诺书
2014/05/23 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
先进学校事迹材料
2014/12/30 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技