JavaScript學習總結(二十二)——JavaScript屏蔽Backspace鍵

標籤：get   var   輸入框   判斷   down   輸入   今天   chrome   obj   

今天在IE瀏覽器下發現，當把使用readonly="readonly"屬性將文字框設定成唯讀<input type="text" readonly="readonly"/>時有一個奇怪的問題：如果游標進入唯讀文字框，然後按下Backspace鍵，就會跳轉到上一個頁面，效果就像點擊了瀏覽器的後退按鈕返回前一個頁面一樣，而在Firefox和google下沒有這樣的問題出現，為瞭解決這個問題，寫了一個如下的處理方法，如果文字框是唯讀，那麼就禁用Backspace鍵。

代碼如下：

 1 //處理鍵盤事件 禁止後退鍵（Backspace）密碼或單行、多行文字框除外 2     function banBackSpace(e){    3         var ev = e || window.event;//擷取event對象    4         var obj = ev.target || ev.srcElement;//擷取事件來源    5         var t = obj.type || obj.getAttribute(‘type‘);//擷取事件來源類型   6         //擷取作為判斷條件的事件類型 7         var vReadOnly = obj.getAttribute(‘readonly‘); 8         //處理null值情況 9         vReadOnly = (vReadOnly == "") ? false : vReadOnly;10         //當敲Backspace鍵時，事件來源類型為密碼或單行、多行文本的，11         //並且readonly屬性為true或enabled屬性為false的，則退格鍵失效12         var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 13                     && vReadOnly=="readonly")?true:false;14         //當敲Backspace鍵時，事件來源類型非密碼或單行、多行文本的，則退格鍵失效15         var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")16                     ?true:false;        17         18         //判斷19         if(flag2){20             return false;21         }22         if(flag1){   23             return false;   24         }   25     }26 27 window.onload=function(){28     //禁止後退鍵 作用於Firefox、Opera29     document.onkeypress=banBackSpace;30     //禁止後退鍵  作用於IE、Chrome31     document.onkeydown=banBackSpace;32 }

　　加上這樣的處理之後，就可以解決"唯讀輸入框在IE下按下Backspace鍵回退到前一個頁面的問題了"

JavaScript學習總結(二十二)——JavaScript屏蔽Backspace鍵