JS禁用浏览器退格键实现思路及代码


Posted in Javascript onOctober 29, 2013

上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这和他的习惯不一样,担心万一文字录入一半,他按了退格键,那整个页面的内容就白填了,然后信誓旦旦的说他做的系统中后退键都是不能用的,我这个系统有问题,当时因为事多,只把这个问题记录下来了,后来查了下他以前做的项目,也没有对退格键进行处理。自己的项目都没处理,到我这嚷嚷来了,算了,不和年轻人一般见识。不就禁用个后退键,简单。

其实说禁用也不是完全禁用,后退键在各浏览器下默认为点击了一下后退按钮,只要保证正常的文字录入还可以用,其他情况下的退格键一律禁掉。看代码吧。

当键盘敲下后退键(Backspace)后
1、禁止浏览器自动后退
2、但不影响密码、单行文本、多行文本输入框等的回退操作

解决方案:

网上搜了一下,发现有不少解决方案,相比较之下,zywang的方案较佳

在其基础上,进行补充和完善,以满足需求,整理后的代码如下:
代码一、核心代码:

function forbidBackSpace(e) { 
var ev = e || window.event; //获取event对象 
var obj = ev.target || ev.srcElement; //获取事件源 
var t = obj.type || obj.getAttribute('type'); //获取事件源类型 
//获取作为判断条件的事件类型 
var vReadOnly = obj.readOnly; 
var vDisabled = obj.disabled; 
//处理undefined值情况 
vReadOnly = (vReadOnly == undefined) ? false : vReadOnly; 
vDisabled = (vDisabled == undefined) ? true : vDisabled; 
//当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
//并且readOnly属性为true或disabled属性为true的,则退格键失效 
var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true); 
//当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea"; 
//判断 
if (flag2 || flag1) return false; 
} 
//禁止后退键 作用于Firefox、Opera 
// document.onkeypress = forbidBackSpace; 
//禁止后退键 作用于IE、Chrome 
document.onkeydown = forbidBackSpace;

代码二、

function bindBackEvent() { //防止退格键
 	$(document).keydown(function(e){
 		e = window.event || e;
	 	var code = e.keyCode || e.which;
	 	if (code == 8) {
	 		var src = e.srcElement || e.target;
	 		var tag = src.tagName;
	 		if (tag != "INPUT" && tag != "TEXTAREA") {
	 			e.returnValue = false; 
	 			return false;
	 		} else if ((tag == "INPUT" || tag == "TEXTAREA") && src.readOnly == true) {
	 			e.returnValue = false;
	 			return false; 
	 		}
	 	}
 	});
 }

Javascript 相关文章推荐
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
js中的面向对象入门
Mar 06 Javascript
简单实现js放大镜效果
Jul 24 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 #Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 #Javascript
js动态设置div的值下例子
Oct 29 #Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 #Javascript
Js获取数组最大和最小值示例代码
Oct 29 #Javascript
js 遍历json返回的map内容示例代码
Oct 29 #Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 #Javascript
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php比较相似字符串的方法
2015/06/05 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
layui的select联动实现代码
2019/09/28 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
jquery实现手风琴案例
2020/05/04 jQuery
JS写滑稽笑脸运动效果
2020/05/28 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
django之常用命令详解
2016/06/30 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
利用python实现汉诺塔游戏
2021/03/01 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
《水乡歌》教学反思
2014/04/24 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers