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 面向对象的 私有成员和公开成员
May 13 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
js如何获取网页所有图片
May 12 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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判断图片格式的七种方法小结
2013/06/03 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
详解Django中的过滤器
2015/07/16 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python 实现单例模式的5种方法
2020/09/23 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
升职自荐信
2013/11/28 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
我的老师教学反思
2014/05/01 职场文书
环保倡议书400字
2014/05/15 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS