上周提交了一個項目(內部使用的),一同事提出個BUG,說要禁用退格鍵(backspace或者叫后退鍵),因為這和他的習慣不一樣,擔心萬一文字錄入一半,他按了退格鍵,那整個頁面的內容就白填了,然后信誓旦旦的說他做的系統(tǒng)中后退鍵都是不能用的,我這個系統(tǒng)有問題,當時因為事多,只把這個問題記錄下來了,后來查了下他以前做的項目,也沒有對退格鍵進行處理。自己的項目都沒處理,到我這嚷嚷來了,算了,不和年輕人一般見識。不就禁用個后退鍵,簡單。
其實說禁用也不是完全禁用,后退鍵在各瀏覽器下默認為點擊了一下后退按鈕,只要保證正常的文字錄入還可以用,其他情況下的退格鍵一律禁掉??创a吧。
當鍵盤敲下后退鍵(Backspace)后
1、禁止瀏覽器自動后退
2、但不影響密碼、單行文本、多行文本輸入框等的回退操作
解決方案:
網(wǎng)上搜了一下,發(fā)現(xiàn)有不少解決方案,相比較之下,zywang的方案較佳
在其基礎上,進行補充和完善,以滿足需求,整理后的代碼如下:
代碼一、核心代碼:
function forbidBackSpace(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 = forbidBackSpace; //禁止后退鍵 作用于IE、Chrome document.onkeydown = forbidBackSpace;
代碼二、
function bindBackEvent() { //防止退格鍵 $(document).keydown(function(e){ e = window.event || e; var code = e.keyCode || e.which; if (code == 8) { var src = e.srcElement || e.target; var tag = src.tagName; if (tag != "INPUT" && tag != "TEXTAREA") { e.returnValue = false; return false; } else if ((tag == "INPUT" || tag == "TEXTAREA") && src.readOnly == true) { e.returnValue = false; return false; } } }); }
新聞熱點
疑難解答