首頁 web前端 js教程 javascript阻止瀏覽器後退事件防止誤操作清空表單_javascript技巧

javascript阻止瀏覽器後退事件防止誤操作清空表單_javascript技巧

May 16, 2016 pm 05:12 PM
javascript 瀏覽器

由於客戶大多是不懂電腦的大菜鳥。所以誤操作比較多,有時沒有選取文字框,然後不小心按了退格之後,剛剛辛苦填好的表單就什麼也後退的沒有了。上網查了很多資料,然後整合了一下。分享給大家。也希望優格姊姊來看看我的第一篇技術部落格。呵呵(別介意我提到了你哦。)。廢話不多說。上源碼。

複製程式碼 程式碼如下:

$(function(){


$(function(){
/處理鍵盤事件禁止後退鍵(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');
var vEnabled = obj.getAttribute('enabled');
//處理null值狀況 vReadOnly = (vReadOnly == null) ? false : true;
vEnabled = (vEnabled == null) ? true : vEnabled;

//當敲Backspace鍵時,事件來源類型為密碼或單行、多行文字的,
//且readonly屬性為true或enabled屬性為false的,則退格鍵失效
var flag1=(ev.keyCode == 8 && (t=="password" | | t=="text" || t=="textarea")
&& (vReadOnly || vEnabled!=true))?true:false;

//當敲Backspace鍵時,事件來源型別非密碼或單行、多行文字的,則退格鍵失效
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea ")
?true:false;

//判斷
if(flag2){
return false;
}
if(flag1){
return false>return false ;
}
}

//禁止後退鍵作用於Firefox、Opera
document.onkeypress=banBackSpace;
//禁止後退鍵作用於IE、Chrome
document.onkeydown=banBackSpace;
window.history.forward(1);//屏蔽瀏覽器自帶的後退鍵
})

需要注意的地方是:
這段程式碼一定要放到初始化方法中。然後用document.onkeypress=banBackSpace去呼叫自己寫的方法。 複製程式碼

程式碼如下:

vReadOnly = (vReadOnly : true ;對於這段程式碼,原來冒號後面是vReadOnly這個值,後來發現在我專案中它回傳空,不是null於是改成了true 。 按照上面方法即可實現在非text,password,textare時按退格阻止瀏覽器後退事件,但是不會阻止在文本框有值時的退格事件。這是我的第一篇博客,希望各位多多捧場。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
歐易交易所如何註冊賬戶 歐易交易所註冊教程 歐易交易所如何註冊賬戶 歐易交易所註冊教程 Apr 24, 2025 pm 02:06 PM

註冊歐易賬戶的步驟如下:1.準備有效郵箱或手機號和穩定網絡。 2.訪問歐易官網。 3.進入註冊頁面。 4.選擇郵箱或手機號註冊,填寫信息。 5.獲取並填寫驗證碼。 6.同意用戶協議。 7.完成註冊並登錄,進行KYC和設置安全措施。

歐易交易所app官網下載蘋果手機下載 歐易交易所app官網下載蘋果手機下載 Apr 28, 2025 pm 06:57 PM

歐易交易所app支持蘋果手機下載,訪問官網,點擊“蘋果手機”選項,在App Store中獲取並安裝,註冊或登錄後即可進行加密貨幣交易。

幣安下載鏈接 幣安下載路徑 幣安下載鏈接 幣安下載路徑 Apr 24, 2025 pm 02:12 PM

安全下載幣安APP需通過官方渠道:1. 訪問幣安官網,2. 找到並點擊APP下載入口,3. 選擇掃描二維碼、應用商店或直接下載APK文件的方式下載,確保鏈接和開發者信息真實,開啟雙重驗證保護賬戶安全。

芝麻開門官網入口 芝麻開門官方最新入口2025 芝麻開門官網入口 芝麻開門官方最新入口2025 Apr 28, 2025 pm 07:51 PM

芝麻開門是重點加密貨幣交易的平台,用戶可以通過官方網站或社交媒體獲取入口,確保訪問時驗證SSL證書和網站內容的真實性。

芝麻開門交易所如何註冊賬戶 芝麻開門交易所註冊教程 芝麻開門交易所如何註冊賬戶 芝麻開門交易所註冊教程 Apr 24, 2025 pm 02:00 PM

註冊芝麻開門賬號需7步:1.準備有效郵箱或手機號及穩定網絡;2.訪問官網;3.進入註冊頁面;4.選擇並填寫註冊方式;5.獲取並填寫驗證碼;6.同意用戶協議;7.完成註冊並登錄,建議進行KYC和設置安全措施。

歐易官網入口 歐易官方最新入口2025 歐易官網入口 歐易官方最新入口2025 Apr 28, 2025 pm 07:48 PM

選擇可靠的交易平台如歐易(OKEx),確保訪問官方入口。

幣安官網入口 幣安官方最新入口2025 幣安官網入口 幣安官方最新入口2025 Apr 28, 2025 pm 07:54 PM

訪問幣安官網,並查看HTTPS和綠鎖標誌,避免釣魚網站,官方應用也可安全訪問。

什麼是鏈上交易?全球鏈上交易所有哪些? 什麼是鏈上交易?全球鏈上交易所有哪些? Apr 22, 2025 am 10:06 AM

歐盟MiCA合規認證,覆蓋50 法幣通道,冷存儲比例95%,零安全事件記錄。美國SEC持牌平台,法幣直購便捷,冷存儲比例98%,機構級流動性,支持大額OTC和自定義訂單,多級清算保護。

See all articles