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 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
少女风vue组件库的制作全过程
May 15 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
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
python删除某个字符
2018/03/19 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
心得体会范文
2014/01/04 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
运动会致辞稿50字
2014/02/04 职场文书
党员志愿者活动方案
2014/08/28 职场文书
大学生思想道德自我评价
2015/03/09 职场文书