JavaScript如何禁止Backspace鍵
今天在IE瀏覽器下發(fā)現(xiàn),當(dāng)把使用readonly="readonly"屬性將文本框設(shè)置成只讀<input type="text" readonly="readonly"/>時有一個奇怪的問題:如果光標(biāo)進(jìn)入只讀文本框,然后按下Backspace鍵,就會跳轉(zhuǎn)到上一個頁面,效果就像點(diǎn)擊了瀏覽器的后退按鈕返回前一個頁面一樣,而在火狐和google下沒有這樣的問題出現(xiàn),為了解決這個問題,寫了一個如下的處理方法,如果文本框是只讀的,那么就禁用Backspace鍵。
代碼如下:
//處理鍵盤事件 禁止后退鍵(Backspace)密碼或單行、多行文本框除外 function banBackSpace(e){ var ev = e || window.event;//獲取event對象 var obj = ev.target || ev.srcElement;//獲取事件源 var t = obj.type || obj.getAttribute('type');//獲取事件源類型 //獲取作為判斷條件的事件類型 var vReadOnly = obj.getAttribute('readonly'); //處理null值情況 vReadOnly = (vReadOnly == "") ? false : vReadOnly; //當(dāng)敲Backspace鍵時,事件源類型為密碼或單行、多行文本的, //并且readonly屬性為true或enabled屬性為false的,則退格鍵失效 var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && vReadOnly=="readonly")?true:false; //當(dāng)敲Backspace鍵時,事件源類型非密碼或單行、多行文本的,則退格鍵失效 var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false; //判斷 if(flag2){ return false; } if(flag1){ return false; } } window.onload=function(){ //禁止后退鍵 作用于Firefox、Opera document.onkeypress=banBackSpace; //禁止后退鍵 作用于IE、Chrome document.onkeydown=banBackSpace; }
加上這樣的處理之后,就可以輕松解決“只讀輸入框在IE下按下Backspace鍵回退到前一個頁面”的問題了。
希望大家喜歡這篇文章,繼續(xù)關(guān)注小編更新整理的文章。
- JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法【基于ES6語法】
- js禁止瀏覽器的回退事件
- js控制文本框禁止輸入特殊字符詳解
- JS實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能
- JS禁止查看網(wǎng)頁源代碼的實(shí)現(xiàn)方法
- JavaScript禁止用戶多次提交的兩種方法
- javascript禁止超鏈接跳轉(zhuǎn)的方法
- JavaScript代碼實(shí)現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt
- javascript實(shí)現(xiàn)禁止鼠標(biāo)滾輪事件
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- JS實(shí)現(xiàn)禁止用戶使用Ctrl+鼠標(biāo)滾輪縮放網(wǎng)頁的方法
相關(guān)文章
高性能JavaScript模板引擎實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎實(shí)現(xiàn)原理詳解,本文著重講解artTemplate模板的實(shí)現(xiàn)原理,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,是其它知名模板引擎的25、32 倍,需要的朋友可以參考下2015-02-02微信小程序通過點(diǎn)擊事件跨頁面?zhèn)鲄⒓癲ata-方法傳參(data-)的示例詳解
在?vue?中,我們可以直接在點(diǎn)擊事件中放入傳遞的參數(shù)進(jìn)行傳參;然而微信小程序中并不適用這樣的寫法,但是微信小程序可以通過自定義屬性從而綁定參數(shù)使用,這篇文章主要介紹了微信小程序通過點(diǎn)擊事件跨頁面?zhèn)鲄⒁约癲ata-方法傳參(data-),需要的朋友可以參考下2023-12-12JS字符串去除連續(xù)或全部重復(fù)字符的實(shí)例
這篇文章主要介紹了JS字符串去除連續(xù)或全部重復(fù)字符的實(shí)例,需要的朋友可以參考下2018-03-03JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能,涉及javascript與jQuery的事件響應(yīng)、頁面元素動態(tài)操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié)
在本篇文章里小編給大家整理的是關(guān)于不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié),需要的朋友們參考下。2020-03-03JavaScript正則表達(dá)式簡單實(shí)用實(shí)例
這篇文章主要介紹了JavaScript正則表達(dá)式簡單實(shí)用實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-06-06一文詳解Web Audio瀏覽器采集麥克風(fēng)音頻數(shù)據(jù)
這篇文章主要為大家介紹Web Audio瀏覽器采集麥克風(fēng)音頻數(shù)據(jù)實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03