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广告实现代码
Nov 17 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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中for循环语句的几种变型
2007/03/16 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP中echo和print的区别
2014/08/28 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
php链式操作的实现方式分析
2019/08/12 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
小学先进集体事迹材料
2014/05/31 职场文书
前台接待岗位职责
2015/02/03 职场文书
公司催款律师函
2015/05/27 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android