JS禁用浏览器退格键实现思路及代码

上周提交了一个项目（内部使用的），一同事提出个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;
	 		}
	 	}
 	});
 }
赞 (0)

相关推荐

  • JS禁用浏览器退格键实现思路及代码

    上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这和他的习惯不一样,担心万一文字录入一半,他按了退格键,那整个页面的内容就白填了,然后信誓旦旦的说他做的系统中后退键都是不能用的,我这个系统有问题,当时因为事多,只把这个问题记录下来了,后来查了下他以前做的项目,也没有对退格键进行处理.自己的项目都没处理,到我这嚷嚷来了,算了,不和年轻人一般见识.不就禁用个后退键,简单. 其实说禁用也不是完全禁用,后退键在各浏览器下默认为点击了一下后退按钮

  • js屏蔽退格键(backspace或者叫后退键与F5)

    没有绝对的屏蔽,最好是js结合服务端混合用.服务端通过判断要打开的页面的参数是否第一次打开,如果不是的话就跳转到指定页面.这里只说js方法. 我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说退格键(backspace/ 后退键),我在一个项目中就遇到过在页面编辑的时候禁用掉退格键,因为退格键会发生页面后退,这样编辑的内容都会失去了,非常的恶心人.ok ,废话少说,直接上代码. 比较好的代码,处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 <

  • js实现模拟计算器退格键删除文字效果的方法

    本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)

    复制代码 代码如下: <script language="Javascript" type="text/javascript"> //屏蔽鼠标右键.Ctrl+N.Shift+F10.F11.F5刷新.退格键 function document.oncontextmenu() { event.returnValue = false; } //屏蔽鼠标右键 function window.onhelp() { return false } //屏蔽F1帮助

  • 屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键

    屏蔽鼠标右键.Ctrl+N.Shift+F10.Alt+F4.F11.F5刷新.退格键 //屏蔽鼠标右键.Ctrl+N.Shift+F10.F11.F5刷新.退格键 function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键 function window.onhelp(){return false} //屏蔽F1帮助 function document.onkeydown(){ if((window.event.alt

  • Cygwin下安装vim后,vim中退格键无法正常使用的解决方法

    Cygwin下安装vim后,vim中退格键无法正常使用的解决方法

    问题描述: 在Cygwin中安装完vim后 进入vim,发现上下左右键和退格键都无法正常使用 问题分析: 首先考虑到的就是缺少vim的配置文件,首先查看/etc路径下是否有vim的配置文件 admin@ThinkPad /etc $ cd /etc admin@ThinkPad /etc $ ls -a|grep vimrc发现/etc下没有vim的全局配置文件,然后再查找当前用户的vim配置文件.vimrc admin@ThinkPad /etc $ cd ~ admin@ThinkPad ~

  • 屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码

    //屏蔽鼠标右键.Ctrl+n.shift+F10.F5刷新.退格键  function KeyDown(){  if ((window.event.altKey)&&  ((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←  (window.event.keyCode==39))){ //屏蔽 Alt+ 方向键 →  alert("不准你使用ALT+方向键前进或后退网页!");  event.returnValue=false; 

  • jsp要实现屏蔽退格键问题探讨

    今天涉及到一个问题,在jsp中的查询条件中,有文本框可输入筛选条件,也有下拉框选择筛选条件.输入框中内容可按"Backspace"键进行删除,但是下拉框中需要屏蔽backspace功能,否则就回执行页面的回退功能.代码如下 复制代码 代码如下: <td width="350px;">企业名称:  <input type="text" name="filter_psName" id="psName&q

  • js 禁用只读文本框获得焦点时的退格键

    有时候难免会要用到只读的文本框,可今天发现只读文本框有一个缺陷,当鼠标焦点在文本框里面的时候按回退键(backSpace), 会退回到前一个页面,这个问题就有点烦恼了,用户又不清楚可不可以输入,他如果看到文本框想去改里面的东西,按一下,有可能前面所有填写的数据就会丢失.故此写了个方法,供大伙有需要时放入<script></script>,保管你称心如意. 复制代码 代码如下: document.documentElement.onkeydown = function(evt){ v

  • js弹出层永远居中实现思路及代码

    js弹出层永远居中实现思路及代码

    弹出层窗口永远居中 复制代码 代码如下: <script type="text/javascript"> var isIE=window.XMLHttpRequest?false:true; var aIsIE={}; window.onload=function(){ if(isIE){ window.onscroll=doIE; window.onresize=doIE; } function doIE(){ aIsIE.top=document.documentEle

随机推荐