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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
javascript操作css属性
Dec 30 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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对接java现实加签验签的实例
2016/11/25 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
老生常谈Python基础之字符编码
2017/06/14 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
电子商务个人自荐信
2013/12/12 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
大学同学会活动方案
2014/08/20 职场文书
员工工作自我评价
2014/09/26 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js