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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
react 父子组件之间通讯props
Sep 08 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设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python 的 with 语句详解
2014/06/13 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
学习python分支结构
2019/05/17 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
高三语文教学反思
2014/01/15 职场文书
预备党员转正考核材料
2014/06/03 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
七一建党日演讲稿
2014/09/05 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
班主任工作实习计划
2015/01/16 职场文书
财务年终工作总结大全
2019/06/20 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
MySQL新手入门进阶语句汇总
2022/09/23 MySQL