解决浏览器中点击【Backspace】回退问题
来源:互联网 发布:faker知乎 编辑:程序博客网 时间:2024/05/16 16:17
问题:
工作中遇到在浏览器空白处,或者不可编辑的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则阻止Backspaceif (tagName != 'INPUT' && tagName != 'TEXTAREA') {return stopIt(ev);}var tagType = obj.type.toUpperCase();//标签类型//input标签除了下面几种类型,全部阻止Backspaceif (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD')) {return stopIt(ev);}//input或者textarea输入框如果不可编辑则阻止Backspaceif ((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对象。如onmousemove=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;
阅读全文
1 0
- 解决浏览器中点击【Backspace】回退问题
- shell 中read退格(backspace)问题
- 按 backspace时 如何禁止浏览器的回退功能
- 屏蔽backspace键和浏览器回退按钮
- 点击浏览器回退,不从缓存中读取页面
- 解决ibus在google chrome / chromium 浏览器中使用Backspace后无法输入文字的问题
- 屏蔽 Backspace 页面回退
- 火狐和谷歌浏览器屏蔽键盘按键Backspace回退网页
- 火狐和谷歌浏览器屏蔽键盘按键Backspace回退网页
- 点击浏览器回退,不从缓存中读取页面 (jsp)
- ExtJS4单击Backspace页面回退
- onpopstate浏览器点击回退按钮时触发的事件
- onpopstate浏览器点击回退按钮时触发的事件
- onpopstate浏览器点击回退按钮时触发的事件
- 浏览器回退按钮无法使用问题
- ubuntu vi编辑器使用backspace不能退格删除问题
- ubuntu vi编辑器使用backspace不能退格问题
- 微信浏览器 大部分浏览器的回退问题
- 基于FFmpeg的视音频分离器
- Opencv学习之漫水填充算法
- xml无法解析<和>导致无法导出excel问题
- 指针和引用
- 工作记录
- 解决浏览器中点击【Backspace】回退问题
- [python每日一练]--0000:图片添加数字
- SDOI 游记
- 从myExlipse 到IntelliJ IDEA
- 算法分析与设计课程(17):【leetcode】4Sum
- 拖拽RecyclerView的item重新排版
- seajs使用方法
- 小C实例也有大梦想
- Android 反编