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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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中实现Bloom Filter算法
2015/03/30 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
代码生成器 document.write()
2007/04/15 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
javascript实现简易计算器
2017/02/01 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
django实现分页的方法
2015/05/26 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
诚信承诺书模板
2014/05/26 职场文书
作风建设年活动总结
2014/08/27 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
红色电影观后感
2015/06/18 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js