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 相关文章推荐
js对文章内容进行分页示例代码
Mar 05 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 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正则中的捕获组与非捕获组
2016/07/18 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php多进程应用场景实例详解
2019/07/22 PHP
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
js实现表格字段排序
2014/02/19 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python实现飞船大战
2020/04/24 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
用python对excel查重
2020/12/07 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
文明工地标语
2014/06/16 职场文书
员工保密协议书
2014/09/27 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书