JS禁用退格鍵防頁面返回(不影響表單等編輯)
阿新 • • 發佈:2019-01-31
我們在真實的專案開發中經常會使用JS 對鍵盤上的一些按鍵進行禁用,常見的比如說退格鍵(backspace/ 後退鍵),防止在非編輯的狀態下按了退格鍵整個介面都返回上以歷史頁面,這將會導致所有已編輯的資料丟失,所以有必要在這種前端介面遮蔽掉非表單編輯狀態下的退格鍵按鍵操作。js程式碼如下:
<script type="text/javascript"> //處理鍵盤事件 禁止後退鍵(Backspace)密碼或單行、多行文字框除外 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; </script>