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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
ionic3 懒加载
Aug 16 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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定时执行计划任务的多种方法小结
2011/12/19 PHP
第五章 php数组操作
2011/12/30 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
php微信开发之关注事件
2018/06/14 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python中requests小技巧
2017/05/10 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
python中K-means算法基础知识点
2021/01/25 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
VC++笔试题
2014/10/13 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
医药工作者的求职信范文
2013/09/21 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2014年妇联工作总结
2014/11/21 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python