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 相关文章推荐
Javascript遍历table中的元素示例代码
Jul 08 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
简单实现JS计算器功能
Dec 21 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
js里面的变量范围分享
Jul 18 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
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-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
thinkphp分页集成实例
2017/07/24 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
计算机专业毕业生的自我评价
2013/11/18 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
群众路线党课主持词
2014/04/01 职场文书
大学生见习报告总结
2014/11/04 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
放假通知
2015/04/14 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis