快捷導(dǎo)航

JS禁用瀏覽器退格鍵實(shí)現(xiàn)思路及代碼

更新時(shí)間：2013年10月29日 17:46:16 投稿：whsnow

關(guān)于瀏覽器退格鍵的禁用，可行的方法有很多，在本文將為大家詳細(xì)介紹下在js中時(shí)如何做到的，有需求的各位可以參考下

上周提交了一個(gè)項(xiàng)目（內(nèi)部使用的），一同事提出個(gè)BUG，說要禁用退格鍵（backspace或者叫后退鍵），因?yàn)檫@和他的習(xí)慣不一樣，擔(dān)心萬一文字錄入一半，他按了退格鍵，那整個(gè)頁面的內(nèi)容就白填了，然后信誓旦旦的說他做的系統(tǒng)中后退鍵都是不能用的，我這個(gè)系統(tǒng)有問題，當(dāng)時(shí)因?yàn)槭露?，只把這個(gè)問題記錄下來了，后來查了下他以前做的項(xiàng)目，也沒有對退格鍵進(jìn)行處理。自己的項(xiàng)目都沒處理，到我這嚷嚷來了，算了，不和年輕人一般見識(shí)。不就禁用個(gè)后退鍵，簡單。

其實(shí)說禁用也不是完全禁用，后退鍵在各瀏覽器下默認(rèn)為點(diǎn)擊了一下后退按鈕，只要保證正常的文字錄入還可以用，其他情況下的退格鍵一律禁掉?？创a吧。

當(dāng)鍵盤敲下后退鍵（Backspace）后
1、禁止瀏覽器自動(dòng)后退
2、但不影響密碼、單行文本、多行文本輸入框等的回退操作

解決方案：

網(wǎng)上搜了一下，發(fā)現(xiàn)有不少解決方案，相比較之下，zywang的方案較佳

在其基礎(chǔ)上，進(jìn)行補(bǔ)充和完善，以滿足需求，整理后的代碼如下：
代碼一、核心代碼：

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; 
//當(dāng)敲Backspace鍵時(shí)，事件源類型為密碼或單行、多行文本的， 
//并且readOnly屬性為true或disabled屬性為true的，則退格鍵失效 
var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true); 
//當(dāng)敲Backspace鍵時(shí)，事件源類型非密碼或單行、多行文本的，則退格鍵失效 
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; 
	 		}
	 	}
 	});
 }

您可能感興趣的文章: