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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
没有document.getElementByName方法
Aug 19 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
vue选项卡切换的实现案例
Apr 11 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
如何利用php+mysql保存和输出文件
2006/10/09 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Express系列之multer上传的使用
2017/10/27 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
幼儿园教师工作感言
2014/02/15 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
债务追讨律师函
2015/06/24 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
合作意向书范本
2019/04/17 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang