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中常见陷阱小结
Apr 27 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
apache配置虚拟主机的方法详解
2013/06/17 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
给民警的表扬信
2014/01/08 职场文书
晚会邀请函范文
2014/01/24 职场文书
二年级语文教学反思
2014/02/02 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
六查六看剖析材料
2014/10/06 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
谢师宴学生致辞
2015/07/27 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL