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 冒泡事件阻止实现代码
Jan 27 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
浅析Ajax语法
Dec 05 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
Express 配置HTML页面访问的实现
Nov 01 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的MySQL连接类
2013/06/07 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript Split()方法
2015/12/18 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python pip如何手动安装二进制包
2020/09/30 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
python中time包实例详解
2021/02/02 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
师德师风建设方案
2014/05/08 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
地理科学专业自荐信
2014/09/01 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
初婚初育证明范本
2014/11/24 职场文书
工人先锋号申报材料
2014/12/29 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
五一晚会主持词
2015/07/01 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA