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源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
Vue监视数据的原理详解
Feb 24 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
jQuery中parent()方法用法实例
2015/01/07 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
Node.js+ELK日志规范的实现
2019/05/23 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python datetime处理时间小结
2020/04/16 Python
Python函数参数分类原理详解
2020/05/28 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
2014年度党员自我评议
2014/09/13 职场文书
刑事附带民事代理词
2015/05/25 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
php字符串倒叙
2021/04/01 PHP
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python