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 全角转换实现代码
Jul 17 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
vue一步步实现alert功能
Jul 05 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
Python开发编码规范
2006/09/08 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
初中班主任工作随笔
2015/08/15 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL