javascript禁用Backspace退格键

最新推荐文章于 2019-12-20 11:07:43 发布

原创最新推荐文章于 2019-12-20 11:07:43 发布 · 915 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #firefox #null #浏览器 #ie #chrome

本文介绍了一种在网页中禁用Backspace键的方法，避免触发浏览器的后退操作，特别适用于需要在线编辑的场景。

javascript禁用Backspace退格键（都是网上搜索的资源，这里自己只是作个记录，留作以后备用）

最近项目有个新需求,要求在窗口中编辑的时候禁用掉退格键,因为退格键会发生页面后退的动作,编辑的时候非常不便.

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

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

javascript代码

 
        //处理键盘事件
       
        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在于,当编辑窗口中有一个不可编辑的输入框的时候,如果光标的位置在其上,敲退格键的时候依然会发生页面后退.所以,第二种方法做了改良:代码如下

 
        //处理键盘事件 禁止后退键（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后,产出的代码如下:

      //处理键盘事件 回车键(Enter)提交 禁止后退键（Backspace）\退出键（Esc）密码或单行、多行文本框除外
     
      function
      banBackSpace(e){
     
          //回车键(Enter)提交
     if(ev.keyCode == 13 || ev.keyCode == 108){  
                 
         // 提交事件
         //searchDayh('$!hrbUrl','$!username','$!password','$!mhlx','$!isUseScreen');
         
         return false;
        
     }else if(ev.keyCode == 8 || ev.keyCode == 27){  //禁止后退键(Backspace)、退出键(Esc)    
      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"
      ;
        //当敲Esc键时，无效
        var flag3= ev.keyCode == 27;
 
      //判断
     
      if
      (flag2 || flag1)
      return
      false
      ;
     
          }
 }
 
      //禁止退格键 作用于Firefox、Opera
     
      document.onkeypress=banBackSpace;
     
      //禁止退格键 作用于IE、Chrome
     
      document.onkeydown=banBackSpace;