解决浏览器中点击【Backspace】回退问题
问题:
工作中遇到在浏览器空白处,或者不可编辑的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对象。如ο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;
解决浏览器中点击【Backspace】回退问题相关推荐
- (转)解决浏览器中点击【Backspace】回退问题
工作中遇到在浏览器空白处,或者不可编辑的input框上,点击[Backspace]按键,出现浏览器页面回退的问题,经过测试,发现谷歌浏览器默认屏蔽了这个回退的功能,但IE.360浏览器.火狐浏览器都没 ...
- 解决浏览器中点击input输入框时,placeholder的值不消失的方法
<input type="text" placeholder="请输入" οnfοcus="this.placeholder=''" ...
- 解决默写浏览器中点击input输入框时,placeholder的值不消失的方法
解决默写浏览器中点击input输入框时,placeholder的值不消失的方法 参考文章: (1)解决默写浏览器中点击input输入框时,placeholder的值不消失的方法 (2)https:// ...
- 如何在浏览器中点击复制微信号并且跳转到微信
如何在浏览器中点击复制微信号并且跳转到微信? <html lang="en"> <head> <meta charset="UTF-8&qu ...
- 解决第三方网页在微信浏览器中点击图片会自动放大
自己使用的是微信Android客户端,使用img标签的src属性将图片设置好了以后,在微信中调试,点击图片竟然放大,自己 没写放大图片的方法,也没有调用wx.previewImage()方法,最后查找 ...
- 为什么火狐浏览器中点击按钮失效_各种浏览器审查、监听http头工具介绍
一.谷歌内置的审查工具(v17.0). 右键点击审查(Ctrl+Shirt+Alt) 浏览器下方会出现审查框,刷新网页 就会出现下图所示,先后点击"netword"-->在下 ...
- el-radio组件在safari浏览器中点击时出现蓝色阴影的问题
加上以下样式即可 .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{box-shadow: ...
- 删除web文本框中的内容需要或者文本框失去焦点,点击“Backspace”键时页面回退,屏蔽页面回退键的方法
问题:web文本框中的内容需要删除或者文本框失去焦点,点击"Backspace"键时,页面就回退了,下面是一种屏蔽页面回退键的方法. 原因:当文本输入框设置为只读时,按后退键默认都 ...
- ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一 ...
最新文章
- 服务器预装操作系统,服务器预装操作系统吗
- 在linux将一些程序放到后台运行的方法(nohup/screen/daemonize)
- postgresql 9.1 暂停 stream 后使用 rsync 异机同步文件
- 【android-tips】如何在view中取得activity对象
- 签约中国搜索,第四范式助力智慧媒体转型发展
- javaSE各阶段练习题--流程控制2
- [PAT乙级]1033 旧键盘打字(getline()读入)
- 如何用堆栈来保存和恢复滚动条位置
- 国际C语言混乱代码大赛结果公布
- CVPR2018 目标检测算法总览(最新的目标检测论文)
- 案例解读:利用12c渐进式DASH分析ON CPU
- css 波纹扩散效果
- spark java 案例_Spark入门案例
- 69-Python的匿名函数1
- python sqlserver 数据操作_python上手--python操作数据库
- java lambda有必要_深度分析:java8的新特性lambda和stream流,看完你学会了吗?
- c语言- 负号运算符,C语言运算符盘点,C语言运算符知识点讲解
- 烽火JAVA面试题目
- Python生成文档(PDF, HTML)
- 正则表达式删除空白行
热门文章
- JavaWeb面试题(持续)
- asp.net mvc、asp.net url重写 Url Rewrite
- 用ffmpeg 转换flv 2 wma
- C++ 如何调用windows API实现图片打印
- 【技术贴】解决U盘无法复制:磁盘被写保护,请去掉写保护或使用另一张磁盘。...
- 纪念那些在2019年逝去的技术
- 工银和拾方易共开展二维码支付活动
- C++移动拷贝构造函数
- Polygon zkEVM zkProver基本设计原则 以及 Storage状态机
- maven中用dom4j解析xml文档