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对象的构造和继承实现代码
Dec 05 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
js实现导航跟随效果
Nov 17 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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删除左端与右端空格的方法
2014/11/29 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
python线程里哪种模块比较适合
2020/08/02 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
五年级科学教学反思
2014/02/05 职场文书
企业贷款委托书格式
2014/09/12 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
行政处罚事先告知书
2015/07/01 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书