首页 > 代码库 > JavaScript屏蔽Backspace键

JavaScript屏蔽Backspace键

2024-08-24 04:28:03   218人阅读

　　当使用readonly="readonly"属性将文本框设置成只读<input type="text" readonly="readonly"/>时会出现一个问题，如果光标进入只读文本框，然后按下Backspace键，就会跳转到上一个页面，效果就像点击了浏览器的后退按钮返回前一个页面一样，使用户体验大打折扣。为了解决这个问题，可在页面添加如下处理方法，如果文本框是只读的，那么就禁用Backspace键。

代码如下：

  <script type="text/javascript">
    //处理键盘事件 禁止后退键（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‘);//IE为true,Chrome为‘readonly‘
          //alert("vReadOnly="+vReadOnly);
          //处理null值情况
          vReadOnly = (vReadOnly == "") ? false : vReadOnly;
          //当敲Backspace键时，事件源类型为密码或单行、多行文本的，
          //并且readonly属性为true或enabled属性为false的，则退格键失效
          var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
                      && (vReadOnly||vReadOnly=="readonly"))?true:false;
          //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
          var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")
                      ?true:false;        
          //alert("vReadOnly="+vReadOnly+",flag1="+flag1+",flag2="+flag2);
          //判断
          if(flag2){
              return false;
          }
          if(flag1){   
              return false;   
          }   
    }
    
    window.onload=function(){
      //禁止后退键 作用于Firefox、Opera
      //document.onkeypress=banBackSpace;
      //禁止后退键  作用于IE、Chrome
      document.onkeydown=banBackSpace;
    }
    
    function clickEvent(e){
        alert("e="+e+",window.event="+window.event);
        var ev = "" || window.event;//“”、null、undefined   
        alert("ev="+ev);
    }
  </script>
  <body>        
         可读写文本框：<input type="text" value="123"></br></br>
         只读文本框：<input type="text" value="123" readonly="readonly"></br></br>
         <button type="button" name="btn" onclick="clickEvent()">按钮</button>
  </body>

补充：

1、readonly属性在各浏览器中的区别：

　　IE浏览器：可以获得焦点，光标可进入，但不能输入。获得焦点时按下Backpace键，页面会后退跳转。
　　Firefox浏览器：可获得焦点，光标可进入，但不能输入。获得焦点时按下Backpace键，不起任何作用。
　　Chrome浏览器：可以获得焦点，光标不可进入。 

2、采用disable属性，在各浏览器中均为：光标不可进入。用户体验更好些。只要有disabled关键字即有效，可以不赋值，甚至赋值为空或false都表示disabled有效。

<input type="text" name="email" disabled="disabled">

若要切换input的可编辑状态，在javascript中写如下代码。注意用的attr()方法，不是prop()方法。

$(‘input‘).attr("disabled", false);//可编辑
$(‘input‘).attr("disabled", true);//不编辑

另外还需特别注意的是，采用disable属性设置为不可编辑后，表单提交不会自动提交到后台，action中通过setter/getter方法是取不到值的。

 

JavaScript屏蔽Backspace键


联系
我们