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 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
浅谈vue项目,访问路径#号的问题
Aug 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
15种PHP Encoder的比较
2007/04/17 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python如何实现的二分查找算法
2020/05/27 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
绩效考核实施方案
2014/03/18 职场文书
志愿者活动总结
2014/04/28 职场文书
党员活动日总结
2014/05/05 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
中国世界遗产导游词
2015/02/13 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
python热力图实现的完整实例
2022/06/25 Python
LeetCode189轮转数组python示例
2022/08/05 Python