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插件创建常规模态窗口登陆效果
Aug 23 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
vue之数据交互实例代码
Jun 20 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 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自定义函数格式化json数据示例
2016/09/14 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
json 实例详细说明教程
2009/10/31 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
总经理秘书工作职责
2013/12/26 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
党员转正党支部意见
2015/06/02 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
运动会5000米加油稿
2015/07/21 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Python基础之元组与文件知识总结
2021/05/19 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫