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 $.getJSON()跨域请求
Dec 21 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
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
DISCUZ 分页代码
2007/01/02 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python字典简介以及用法详解
2016/11/15 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
捐书寄语赠言
2014/01/18 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
火锅店的活动方案
2014/08/15 职场文书
生产操作工岗位职责
2014/09/16 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
四风之害观后感
2015/06/09 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
使用Apache Camel表达REST服务的方法
2022/06/10 Servers