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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
深入剖析Node.js cluster模块
May 23 Javascript
JavaScript继承与多继承实例分析
May 26 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
咖啡知识大全
2021/03/03 新手入门
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
vue中进行微博分享的实例讲解
2019/10/14 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
对Python 内建函数和保留字详解
2018/10/15 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python利用opencv保存、播放视频
2020/11/02 Python
python 实现波浪滤镜特效
2020/12/02 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
实习期自我鉴定
2013/10/11 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
产品质量保证书
2014/04/29 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
促销活动总结怎么写
2014/06/25 职场文书
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers