1. 程式人生 > >解決瀏覽器中點選【Backspace】回退問題

解決瀏覽器中點選【Backspace】回退問題

問題:

工作中遇到在瀏覽器空白處,或者不可編輯的input框上,點選【Backspace】按鍵,出現瀏覽器頁面回退的問題,經過測試,發現谷歌瀏覽器預設遮蔽了這個回退的功能,但IE、360瀏覽器、火狐瀏覽器都沒有,這個功能會導致,特別是後臺系統,session丟失,退回到登入頁面,嚴重影響使用者體驗。
比如,使用者在進行表單的資訊填寫,不經意在瀏覽器空白處點選了【Backspace】按鍵,退到了登入介面,想想這是個什麼樣的體驗。

解決方法:

通過js監聽backspace按鍵的按下事件:

1、如果標籤不是input或者textarea則阻止Backspace
2、input標籤除了(TEXT、TEXTAREA、PASSWORD)這些型別,全部阻止Backspace
3、input或者textarea輸入框如果不可編輯則阻止Backspace

程式碼如下:

function banBackSpace(e) {
		var ev = e || window.event;
		//各種瀏覽器下獲取事件物件
		var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;
		//按下Backspace鍵
		if (ev.keyCode == 8) {
			var tagName = obj.nodeName //標籤名稱
			//如果標籤不是input或者textarea則阻止Backspace
			if (tagName != 'INPUT' && tagName != 'TEXTAREA') {
				return stopIt(ev);
			}
			var tagType = obj.type.toUpperCase();//標籤型別
			//input標籤除了下面幾種型別,全部阻止Backspace
			if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD')) {
				return stopIt(ev);
			}
			//input或者textarea輸入框如果不可編輯則阻止Backspace
			if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) {
				return stopIt(ev);
			}
		}
	}
	function stopIt(ev) {
		if (ev.preventDefault) {
			//preventDefault()方法阻止元素髮生預設的行為
			ev.preventDefault();
		}
		if (ev.returnValue) {
			//IE瀏覽器下用window.event.returnValue = false;實現阻止元素髮生預設的行為
			ev.returnValue = false;
		}
		return false;
	}

	$(function() {
		//實現對字元碼的截獲,keypress中遮蔽了這些功能按鍵
		document.onkeypress = banBackSpace;
		//對功能按鍵的獲取
		document.onkeydown = banBackSpace;
	})
上述程式碼可以放到公共的js中,此處的程式碼參照此篇部落格:
http://www.cnblogs.com/lujiulong/p/6019638.html

在此說明幾點:
1、  IE:有window.event物件
Firefox:沒有window.event物件。可以通過給函式的引數傳遞event物件。如onmousemove=doMouseMove(event)
統一的解決方法:var event = event || window.event;


2、  IE:even物件有srcElement屬性,但是沒有target屬性
Firefox:even物件有target屬性,但是沒有srcElement屬性
解決方法:var obj = event.relatedTarget || event.srcElement || event.target || event.currentTarget;