`

js禁用回退键[backspace键]浏览历史跳转的解决办法

    博客分类:
  • js
阅读更多

在做公司的CMS的时候出现了一些js的问题,其中有一个就是在页面非输入框中按下回退键[backspace键]时页面会跳转到上一页,但是上一页加载失败,说会话已过期,

问题描述到此结束.

 

解决办法:

第一直觉就是上网搜答案,但是结果不理想。

第二上论坛上看看有没有解决办法,到是找到一个类似的问你

 

‘在IE里按backspace键时如何知道是发生在input还是在中文输入法框?’

地址:http://www.iteye.com/problems/3272

 

问题类似,但是不是解决办法,还好的就是我根据他的思路自己试着找解决办法。

 

  多谢fuwang 

 

下面是我代码:

 

window.onload=function(){
	/****************************
	 * 作者:q821424508@sina.com	*
	 * 时间:2012-07-12			*
	 * version:1.0				*
	 * 							*
	 ****************************/
	document.getElementsByTagName("body")[0].onkeydown =function(){
		if(event.keyCode==8){
			var elem = event.srcElement;
			var name = elem.nodeName;
			
			if(name!='INPUT' && name!='TEXTAREA'){
				event.returnValue = false ;
				return ;
			}
			var type_e = elem.type.toUpperCase();
			if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')){
				event.returnValue = false ;
				return ;
			}
			if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){
				event.returnValue = false ;
				return ;
			}
		}
	}
}

 

 

问题解决了,

使用说明:

1.把代码直接复制到页面,【页面必须含有body标签】

2.放到任意一个页面引用的js文件中【直接放到文件的最开始,或最后,不要放到方法里面,页面必须含有body标签】

 

以上为1.0版本,只支持IE:

-------------------------------------------------------分割线------------------------------------------------------------

 

以下为2.0版本,支持IE,firefox,chrome[这三款浏览器经过测试]等浏览器

 酷(又修复了个不大不小的bug,现在是2.1)

 

 

		
		window.onload=function(){
			/****************************
			 * 作者:q821424508@sina.com	*
			 * 时间:2012-08-20			*
			 * version:2.1				*
			 * 							*
			 ****************************/
			document.getElementsByTagName("body")[0].onkeydown =function(){
				
				//获取事件对象
				var elem = event.relatedTarget || event.srcElement || event.target ||event.currentTarget; 
				
				if(event.keyCode==8){//判断按键为backSpace键
				
						//获取按键按下时光标做指向的element
						var elem = event.srcElement || event.currentTarget; 
						
						//判断是否需要阻止按下键盘的事件默认传递
						var name = elem.nodeName;
						
						if(name!='INPUT' && name!='TEXTAREA'){
							return _stopIt(event);
						}
						var type_e = elem.type.toUpperCase();
						if(name=='INPUT' && (type_e!='TEXT' && type_e!='TEXTAREA' && type_e!='PASSWORD' && type_e!='FILE')){
								return _stopIt(event);
						}
						if(name=='INPUT' && (elem.readOnly==true || elem.disabled ==true)){
								return _stopIt(event);
						}
					}
				}
			}
		function _stopIt(e){
				if(e.returnValue){
					e.returnValue = false ;
				}
				if(e.preventDefault ){
					e.preventDefault();
				}				

				return false;
		}

 

欢迎拍砖。

 

欢迎在自己的项目中使用,复制,传播,都可以,不过请注明出处。

 

 

-------------------------------------------------------------------------------------------------------------------------

 

版本升级:

当前版本 2.1 

修复firefox下无法删除input里面字符的bug

 

说明:

不知道为毛,在firefox下出现问题了,之前确定测试过,然后有一个童鞋说这个脚本在firefox下不能用,会出现上面所说现象,我说我调试下,但是后来他说又可以了,

不过经过我的测试这段脚本确实有问题,

确实会出现上述问题,不过是时有时无。

算了还是改一下吧,

 

出现问题的原因:

firefox下 var elem = event.relatedTarget || event.srcElement  无法获取到目标对象。

所以换成target属性来获取。

 

ok 欢迎继续使用 

有问题 请提出来 我来修复。

 

 

 

 

分享到:
评论
11 楼 iammabing 2017-02-07  
好用,怒赞!
10 楼 Flemming323 2016-03-28  
你好,IE下不好用啊,请问为什么呀
9 楼 Consion 2016-02-24  
很好!有用!多谢!
8 楼 wx_hello 2015-08-11  
不错,很好用。。谢谢!
7 楼 q821424508 2015-07-06  
coolbaby241 写道
IE和谷歌效果是正确的,但是火狐禁止了回退功能,可input里的删除不起作用了。麻烦调试下,348063872@qq.com

我这里测试时可以的,你的事什么系统,火狐事什么版本
6 楼 coolbaby241 2015-06-28  
IE和谷歌效果是正确的,但是火狐禁止了回退功能,可input里的删除不起作用了。麻烦调试下,348063872@qq.com
5 楼 tkj789 2013-09-06  
好给力,很好很强大,自己作点小改动,果断就符合我的要求了
4 楼 dzwfeng 2013-05-16  
很实用,感谢啦。
3 楼 q821424508 2012-12-04  
netdldw 写道
好吧,是我看错了。楼主的方法是很完美的

客气,共同学习
2 楼 netdldw 2012-12-03  
好吧,是我看错了。楼主的方法是很完美的
1 楼 netdldw 2012-12-01  
你用了多笨的法子啊。
看下面的:
if(event.keyCode==8){//判断按键为backSpace键 
         
                //获取按键按下时光标做指向的element 
                var elem = event.srcElement;
                if(elem.type != "text" && elem.type != "textarea" && elem.type != "password"){
                 event.keyCode = 0;  
                 event.returnValue = false;
                 }
            }

相关推荐

    jquery+js两种方式实现的禁止退格键回退

    在网页应用中,有时我们需要禁用用户使用退格键(Backspace)进行页面回退,以防止意外的数据丢失或功能误触发。标题提到的“jquery+js两种方式实现的禁止退格键回退”主要涉及JavaScript和jQuery这两种方法来阻止...

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

    可以在页面加载时调用window.history.forward(1),这样即使用户按下退格键,浏览器也不会回退到前一页,因为JavaScript已经让浏览器前进到了后一页。 在实际应用中,屏蔽退格键并不是一个推荐的做法,因为它可能会...

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

    在JavaScript编程中,处理只读文本框时遇到的一个普遍问题是,当用户在只读文本框获得焦点的情况下按下了回退键(backSpace),浏览器会将焦点转移回前一个页面,这可能会导致用户意外地丢失之前填写的所有数据。...

    javascript怎么禁用浏览器后退按钮

    3. 处理键盘事件来禁用后退键(Backspace) 可以通过JavaScript捕获键盘事件,并对事件进行处理,以禁止在特定情况下使用后退键。以下是一个示例代码,它定义了一个`banBackSpace`函数用于处理键盘事件,以禁止在...

    clion快捷键

    - **应用场景**:当你在多个文件或代码段之间切换时,此快捷键可帮助你快速回退至前一个浏览位置。 **2. Ctrl+向右箭头前进** - **功能**:前进至上次浏览的位置。 - **应用场景**:与“Ctrl+向左箭头”相反,用于...

    JAVA+IDEA+快捷键

    在开发过程中,经常需要撤销上一步的操作,比如误删了一段代码或者不小心改动了某些配置,此时按下此组合键即可轻松回退。(必备) **Ctrl + Y**: 用于删除光标所在行或选定的行。这是一个高效的删除方式,避免了...

    软件测试功能测试

    14. **多用回车键测试**:在允许回退的页面,多次使用回车键,检查系统是否能稳定工作,避免异常或错误。 15. **搜索功能测试**:验证搜索功能的准确性,输入存在和不存在的搜索内容,确保搜索结果正确。同时测试多...

    挺全的vs2008快捷键文档

    - **CTRL+-**:回退至上一位置。在多次跳转后需要返回之前的编辑点时使用。 - **CTRL+SHIFT+-**:前进至下一位置。与上一条相反,用于恢复之前的位置。 - **CTRL+F4**:关闭当前文件。在IDE中频繁切换文件时非常...

    远程调试快捷键.

    - **Ctrl+Alt+Shift+Backspace**:回退至上两步操作。 **14. Eclipse特定快捷键**: - **Ctrl+1**:快速修复(Quick Fix)。用于解决编译错误或警告。 - **Ctrl+D**:删除当前行。 - **Ctrl+Alt+Shift+Up/Down*...

    C的快捷键的使用

    30. Ctrl+Z/Alt+Backspace:撤销操作,回退到之前的状态。 31. Ctrl+Shift+Z/Ctrl+Y:重做操作,恢复撤销的操作。 32. F8:切换选定区域的头/尾,方便进行多行选择。 33. Ctrl+Shift+F8:创建矩形选定区域的头/尾...

Global site tag (gtag.js) - Google Analytics