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

谁践踏了优雅 2022-06-14 09:49 730阅读 0赞

问题：

工作中遇到在浏览器空白处，或者不可编辑的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][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.cnblogs.com_lujiulong_p_6019638.html]: http://www.cnblogs.com/lujiulong/p/6019638.html

发表评论取消回复

表情：

评论列表（有 0 条评论，730人围观）

还没有评论，来说两句吧...

相关阅读

相关解决浏览器中点击input框后出现历史数据下拉框

浏览器中点击input框后出现历史数据下拉框，如下图所示，解决方法是在input框中添加autocomplete=“off” 属性 ![在这里插入图片描述][wate

柔光的暖阳◎/ 2022年12月25日 01:52/ 0 赞/ 556 阅读

相关解决浏览器回退页面数据还存在问题

浏览器可以回退。都是因为浏览器进行了缓存。所以记住了上一级操作。要想解决这个。就是禁用页面缓存。增加如下代码： response.addHeader("Pragm

以你之姓@/ 2022年11月22日 02:49/ 0 赞/ 220 阅读

相关 secureCRT使用退格键（backspace）出现^H解决办法

刚新装了python-3.4.1，使用secureCRT连接上去，但是我在进入后，输入回格键时，屏幕显示的是^H，这个让人受不了。终于在网上找到了解决办法，只要修改一下secu

た入场券/ 2022年08月12日 00:10/ 0 赞/ 242 阅读

相关网页中点击增加按钮

效果： ![Center][] HTML： <table border="1" width="100%" class="table_a" style="

雨点打透心脏的1/2处/ 2022年07月11日 05:46/ 0 赞/ 252 阅读

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

问题：工作中遇到在浏览器空白处，或者不可编辑的input框上，点击【Backspace】按键，出现浏览器页面回退的问题，经过测试，发现谷歌浏览器默认屏蔽了这个回退的功能，但

谁践踏了优雅/ 2022年06月14日 09:49/ 0 赞/ 731 阅读

相关使用js禁止浏览器回退

<script language="javascript"> > history.pushState(null,null,document.URL);

梦里梦外;/ 2022年05月30日 09:29/ 0 赞/ 189 阅读

相关 video在谷歌chrome浏览器中点击进度条就重新播放问题

chrome浏览器中video中视频可以正常播放，但拖动进度条到新位置player.currentTime一直为0，进度条无法拖动，点击进度条会从0开始播放。无论是原生vi

向右看齐/ 2022年05月15日 10:36/ 0 赞/ 948 阅读

相关 secureCRT使用退格键（backspace）出现^H解决办法

刚新装了python-3.4.1，使用secureCRT连接上去，但是我在进入后，输入回格键时，屏幕显示的是^H，这个让人受不了。终于在网上找到了解决办法，只要修改一下secu

小灰灰/ 2022年04月13日 12:42/ 0 赞/ 714 阅读

相关 Google Chrome浏览器的回退功能快捷键

能点击进来的应该都是键盘党，我也是。以下： `Alt+←` 回退 `Alt+→` 前进在常用的的浏览器中，按`Backspace`键是可以回退页面的。但在Go

偏执的太偏执、/ 2022年02月21日 16:38/ 0 赞/ 2793 阅读

相关按 backspace时如何禁止浏览器的回退功能

如果页面中有一个输入框被设置成只读模式，该输入框获取焦点，点击“backspace”时，会使页面回退到上一页面，怎么制止这种情况的发生可以使用js来实现的。backspa

清疚/ 2021年06月24日 13:58/ 0 赞/ 606 阅读