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 下拉列表 二级联动插件分享
Mar 29 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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/09/10 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现全排列的打印
2018/08/18 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL