javascript禁用Backspace退格键

在网上搜索了一下,有两种方法,最后决定采用这位仁兄的方法,见http://volunteer521.iteye.com/blog/830522,这是其根据第一种方法做的改良,但是发现还是存在bug,最后做解释!

这里容我多说几句,先说第一种方法:　原理是采用键盘监听,处理键盘事件,这里他的处理方法是将type="text" "password"及"textarea"的输入框以外的元素做了退格键的禁用.

javascript代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//处理键盘事件   function doKey(e){   var ev = e || window.event; //获取event对象   var obj = ev.target || ev.srcElement; //获取事件源   var t = obj.type || obj.getAttribute( 'type' ); //获取事件源类型   if (ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea" ){   return false ;   }   }   //禁止后退键 作用于Firefox、Opera   document.onkeypress=doKey;   //禁止后退键  作用于IE、Chrome   document.onkeydown=doKey;

以上的bug在于,当编辑窗口中有一个不可编辑的输入框的时候,如果光标的位置在其上,敲退格键的时候依然会发生页面后退.所以,第二种方法做了改良:代码如下

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

//处理键盘事件 禁止后退键（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' );      var vEnabled = obj.getAttribute( 'enabled' );      //处理null值情况      vReadOnly = (vReadOnly == null ) ? false : vReadOnly;      vEnabled = (vEnabled == null ) ? true : vEnabled;        //当敲Backspace键时，事件源类型为密码或单行、多行文本的，      //并且readonly属性为true或enabled属性为false的，则退格键失效      var flag1=(ev.keyCode == 8 && (t== "password" || t== "text" || t== "textarea" )                  && (vReadOnly== true || vEnabled!= true ))? true : false ;        //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效      var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea" )                  ? true : false ;        //判断      if (flag2){          return false ;      }      if (flag1){          return false ;      } }   //禁止后退键 作用于Firefox、Opera document.onkeypress=banBackSpace; //禁止后退键  作用于IE、Chrome document.onkeydown=banBackSpace;

而以上的bug在于,在浏览器中,光标在一个不可编辑的输入框上的时候,退格键依然会产生页面后退效果!

原因: 在Firefox及Chrome中obj.getAttribute('readonly') 返回的值是null,或"",而在IE中,该方法返回的是"readonly"或"",而且根据测试,

并没有"enable"的属性,而应该是"disabled",因此,上述方法固然会失效.而且获取DOM的对象属性及标准属性的时候,不应该采用getAttribute方法,这是不准确的,应采用obj.attribute标准方法,这样不会存在因浏览器对js的解释差异而导致的兼容性问题.因此修正以上bug后,产出的代码如下:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

//处理键盘事件 禁止后退键（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.readOnly;      var vDisabled = obj.disabled;      //处理undefined值情况      vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;      vDisabled = (vDisabled == undefined) ? true : vDisabled;      //当敲Backspace键时，事件源类型为密码或单行、多行文本的，      //并且readOnly属性为true或disabled属性为true的，则退格键失效      var flag1= ev.keyCode == 8 && (t== "password" || t== "text" || t== "textarea" )&& (vReadOnly== true || vDisabled== true );      //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效      var flag2= ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea" ;      //判断      if (flag2 || flag1) return false ; } //禁止退格键 作用于Firefox、Opera document.onkeypress=banBackSpace; //禁止退格键 作用于IE、Chrome document.onkeydown=banBackSpace; //我这里结合实际应用中遇到的问题做了修改 function doKey(e){//处理键盘事件jiangkun var ev = e || window.event;//获取event对象 var obj = ev.target || ev.srcElement;//获取事件源 var t = obj.type || obj.getAttribute('type');//获取事件源类型 var condition=false; if(obj.getAttribute('readonly')=='readonly'||obj.getAttribute('readonly')==true){ condition=(ev.keyCode==8); } if(condition){ return false; } }