解决浏览器中点击【Backspace】回退问题

news/2024/7/19 14:16:43 标签: Backspace, js, 回退, event

问题:

工作中遇到在浏览器空白处,或者不可编辑的input框上,点击【Backspace】按键,出现浏览器页面回退的问题,经过测试,发现谷歌浏览器默认屏蔽了这个回退的功能,但IE、360浏览器、火狐浏览器都没有,这个功能会导致,特别是后台系统,session丢失,退回到登录页面,严重影响用户体验。
比如,用户在进行表单的信息填写,不经意在浏览器空白处点击了【Backspace】按键,退到了登录界面,想想这是个什么样的体验。

解决方法:

通过js监听backspace按键的按下事件:

1、如果标签不是input或者textarea则阻止Backspace
2、input标签除了(TEXT、TEXTAREA、PASSWORD)这些类型,全部阻止Backspace
3、input或者textarea输入框如果不可编辑则阻止Backspace

代码如下:

function banBackSpace(e) {
		var ev = e || window.event;
		//各种浏览器下获取事件对象
		var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;
		//按下Backspace键
		if (ev.keyCode == 8) {
			var tagName = obj.nodeName //标签名称
			//如果标签不是input或者textarea则阻止Backspace
			if (tagName != 'INPUT' && tagName != 'TEXTAREA') {
				return stopIt(ev);
			}
			var tagType = obj.type.toUpperCase();//标签类型
			//input标签除了下面几种类型,全部阻止Backspace
			if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD')) {
				return stopIt(ev);
			}
			//input或者textarea输入框如果不可编辑则阻止Backspace
			if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) {
				return stopIt(ev);
			}
		}
	}
	function stopIt(ev) {
		if (ev.preventDefault) {
			//preventDefault()方法阻止元素发生默认的行为
			ev.preventDefault();
		}
		if (ev.returnValue) {
			//IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
			ev.returnValue = false;
		}
		return false;
	}

	$(function() {
		//实现对字符码的截获,keypress中屏蔽了这些功能按键
		document.onkeypress = banBackSpace;
		//对功能按键的获取
		document.onkeydown = banBackSpace;
	})
上述代码可以放到公共的js中,此处的代码参照此篇博客:
http://www.cnblogs.com/lujiulong/p/6019638.html

在此说明几点:
1、  IE:有window.event对象
Firefox:没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
统一的解决方法:var event = event || window.event;


2、  IE:even对象有srcElement属性,但是没有target属性
Firefox:even对象有target属性,但是没有srcElement属性
解决方法:var obj = event.relatedTarget || event.srcElement || event.target || event.currentTarget;



http://www.niftyadmin.cn/n/1258514.html

相关文章

浅谈TypeScript语法

Angular是用TypeScript构建的 TypeScript并不是一门全新的语言,而是ES6的超集。所有的ES6代码都是完全有效且可编译的TypeScript代码。 说明一下:什么是ES5?什么是ES6?ES5是ECMAScript5的缩写,也被称为“普通的JavaSc…

Linux学习--Tomcat启动脚本

#!/bin/bashif [ $# -eq 0 ]; thenecho "请选择要执行的参数start|stop|restart"read param fi if [ $# -gt 1 ]; thenecho "参数大于1个:[bash starttomcat.sh start| stop | restart]"exit fi if [ !-n $param ]; thenparam$1 fi case $param in start)/…

Web前端知识体系精简

Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体…

Linux学习-keepalived+nginx+Tomcat+redis实现高可用和Session共享

通过keepalived实现系统的高可用,nginx反射代理实现负载均衡,TomcatRedis实现session的共享 环境准备 #---两台Centos主机 tomcat1:192.168.115.160 tomcat2:192.168.115.161 #---两台Centos主机 #在centos主机上分别安装keepalived,nginx,tomcatkeepa…

$(document).ready()与window.onload的区别

执行时间不同 $(document).ready()是在浏览器已经解析完整个html文档,dom树已经建立起来,但像图片等资源文件还没有加载之前的时候执行的。 window.onload是在整个页面所有元素(包括图片,引用文件)加载完成后执行。 …

Linux学习-Tomcat下ManagerApp无法访问问题

Tomcat首页下访问ManagerApp时报错 解决方法 #修改tomcat目录下conf/tomcat-users.xml文件如下 <?xml version"1.0" encoding"UTF-8"?> <tomcat-users xmlns"http://tomcat.apache.org/xml"xmlns:xsi"http://www.w3.org/2001/X…

ajax跨域问题以及解决方案

在工作中&#xff0c;大家应该都遇到过ajax跨域问题&#xff0c;浏览器的错误如下&#xff1a; XMLHttpRequest cannot load http://目标地址No Access-Control-Allow-Origin header is present on the requested resource. Origin http://当前页面地址 is therefore not allo…

Angular中的内置指令

Angular提供了若干内置指令。因为内置指令是已经导入过的&#xff0c;故可以直接在组件中直接使用它们。 ngIf 如果你希望根据一个条件来决定显示或隐藏一个元素&#xff0c;可以使用ngIf指令。这个条件是由你传给指令的表达式的结果决定的。 如果表达式的结果返回的是一个假…