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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
JavaScript ES 模块的使用
Nov 12 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python跳出多重循环的方法示例
2019/07/03 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
广告设计专业自荐信范文
2013/11/14 职场文书
搞笑获奖感言
2014/01/30 职场文书
教学质量月活动总结
2015/05/11 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
《正比例》教学反思
2016/02/23 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书