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 相关文章推荐
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
linux下 C语言对 php 扩展
2008/12/14 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python实现Linux中的du命令
2017/06/12 Python
将python代码和注释分离的方法
2018/04/21 Python
python实现zabbix发送短信脚本
2018/09/17 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python nmap实现端口扫描器教程
2020/05/28 Python
最新pycharm安装教程
2020/11/18 Python
医学生实习自荐信
2013/10/01 职场文书
就业自荐信
2013/12/04 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
小学教师培训方案
2014/06/09 职场文书
白莲教口号
2014/06/18 职场文书
宿舍标语大全
2014/06/19 职场文书
小学生植树节活动总结
2014/07/04 职场文书
禁毒心得体会范文
2016/01/15 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书