JavaScript如何禁止Backspace键


Posted in Javascript onDecember 02, 2015

今天在IE浏览器下发现,当把使用readonly="readonly"属性将文本框设置成只读<input type="text" readonly="readonly"/>时有一个奇怪的问题:如果光标进入只读文本框,然后按下Backspace键,就会跳转到上一个页面,效果就像点击了浏览器的后退按钮返回前一个页面一样,而在火狐和google下没有这样的问题出现,为了解决这个问题,写了一个如下的处理方法,如果文本框是只读的,那么就禁用Backspace键
代码如下:

//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外
 function banBackSpace(e){ 
  var ev = e || window.event;//获取event对象 
  var obj = ev.target || ev.srcElement;//获取事件源 
  var t = obj.type || obj.getAttribute('type');//获取事件源类型 
  //获取作为判断条件的事件类型
  var vReadOnly = obj.getAttribute('readonly');
  //处理null值情况
  vReadOnly = (vReadOnly == "") ? false : vReadOnly;
  //当敲Backspace键时,事件源类型为密码或单行、多行文本的,
  //并且readonly属性为true或enabled属性为false的,则退格键失效
  var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
     && vReadOnly=="readonly")?true:false;
  //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
  var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
     ?true:false;  
  
  //判断
  if(flag2){
   return false;
  }
  if(flag1){ 
   return false; 
  } 
 }

window.onload=function(){
 //禁止后退键 作用于Firefox、Opera
 document.onkeypress=banBackSpace;
 //禁止后退键 作用于IE、Chrome
 document.onkeydown=banBackSpace;
}

加上这样的处理之后,就可以轻松解决“只读输入框在IE下按下Backspace键回退到前一个页面”的问题了。

希望大家喜欢这篇文章,继续关注小编更新整理的文章。

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
js文本框输入内容智能提示效果
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 #Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 #Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 #Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 #Javascript
You might like
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
js的延迟执行问题分析
2014/06/23 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python3获取当前文件的上一级目录实例
2018/04/26 Python
python生成器与迭代器详解
2019/01/01 Python
Python变量类型知识点总结
2019/02/18 Python
python中的句柄操作的方法示例
2019/06/20 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
金讯Java笔试题目
2013/06/18 面试题
大学生在校学习的自我评价
2014/02/18 职场文书
升国旗仪式主持词
2014/03/19 职场文书
意向书范文
2014/03/31 职场文书
2014年度培训工作总结
2014/11/27 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
mysql数据库如何转移到oracle
2022/12/24 MySQL