JavaScript如何禁止Backspace键_javascript技巧

今天在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
backspace
javascript backspace、js禁止backspace、怎么禁止backspace、禁止backspace、javascript技巧,以便于您获取更多的相关知识。

时间: 2024-09-14 23:07:58

JavaScript如何禁止Backspace键_javascript技巧的相关文章

javascript实现禁止复制网页内容_javascript技巧

做个笔记 复制代码 代码如下: // 禁用右键菜单.复制.选择 $(document).bind("contextmenu copy selectstart", function() {     return false; }); // 禁用Ctrl+C和Ctrl+V(所有浏览器均支持) $(document).keydown(function(e) {     if(e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67))

javascript实现捕捉键盘上按下的键_javascript技巧

小小的demo,用js捕捉键盘盘上按下了那个键,然后展示出对应的code值 <!DOCTYPE html> <html> <head> <script> function showKeyCode(event) { document.getElementById("result").value= event.keyCode; } </script> </head> <body onkeyup="sho

javascript弹出拖动窗口_javascript技巧

可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>

详细讲解JavaScript中的this绑定_javascript技巧

this 可以说是 javascript 中最耐人寻味的一个特性,就像高中英语里各种时态,比如被动时态,过去时,现在时,过去进行时一样,无论弄错过多少次,下一次依然可能弄错.本文启发于<你不知道的JavaScript上卷>,对 javasript 中的 this 进行一个总结. 学习 this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域.this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 默认绑定 在 javascript 中 ,最常

java、javascript实现附件下载示例_javascript技巧

在web开发中,经常需要开发"下载"这一模块,以下给出一个简单的例子. 在服务器端,使用java开发: @RequestMapping(value = "download.html", method = RequestMethod.GET) public void download(String resourceid, HttpServletRequest request, HttpServletResponse response) { response.setCo

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制_javascript技巧

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

javascript 禁止复制网页_javascript技巧

1.使右键和复制失效 方法1: 在网页中加入以下代码: <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> 方法2: 在<body&g

使用纯javascript实现经典扫雷游戏_javascript技巧

很久以前写的 当时都没写注释的 刚加上了 (尼玛,好多自己都不认识了 ... ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说 然后就等好久好久...) 还有就是没有实现:点击第一个格子不能是雷的功能 <style> ul{padding:0;list-style:none;} #mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;} #mine li{float:left;width

Javascript小技能总结(推荐)_javascript技巧

废话不多说,直接上干货.. 具体代码如下所示: /* @@截取字符串长度,汉字算2个字符 @@return [string]+'...' */ var subString = function(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chine