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 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
使用ECharts实现状态区间图
2018/10/25 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python中对列表排序实例
2015/01/04 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python解包概念及实例
2021/02/17 Python
css3的transition属性详解
2014/12/15 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
区域销售经理岗位职责
2013/12/10 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书