jquery實現頁面離開時檢測當前頁面是否被修改,修改則提示
程式碼如下:
//檢測表單是否已經修改過
$(window).bind('beforeunload',function(){
<span style="white-space:pre"> </span>if( IsModified() ){
<span style="white-space:pre"> </span>return '您輸入的內容尚未儲存,確定離開此頁面嗎?';
<span style="white-space:pre"> </span>}
});
//檢測頁面表單是否已編輯過
function IsModified()
{
var result = false; //初始化返回值
var colInput = document.getElementsByTagName("input"); //獲取輸入框控制元件
for (var i=0; i<colInput.length; i++){ //逐個判斷頁面中的input控制元件
if (colInput[i].value != colInput[i].defaultValue){ //判斷輸入的值是否等於初始值
result = true; //如果不相等,返回true,表示已經修改
colInput[i].style.backgroundColor = "#eee"; //改變被修改控制元件的背景色
}
}
return result;
}
改進
//檢測表單是否已經修改過
$(window).bind('beforeunload',function(){
if( IsModified( $("#form") ) ){
return '您輸入的內容尚未儲存,確定離開此頁面嗎?';
}
});
//檢測頁面表單是否已編輯過 findForm需要檢測的form表單
function IsModified( form ) //js原版
{
if( !form ){
var form = $("form");
}
var result = false;
//初始化返回值
var colInput = form.find("input"); //獲取輸入框控制元件
for (var i=0; i<colInput.length; i++){ //逐個判斷頁面中的input控制元件
var THIS = colInput[i];
if ( THIS.value != THIS.defaultValue ){ //判斷輸入的值是否等於初始值
result = true; //如果不相等,返回true,表示已經修改
THIS.style.backgroundColor = "#eee"; //改變被修改控制元件的背景色
}
}
return result;
}
相關文章
- 如何使用jquery重新整理當前頁面jQuery
- VUE 單頁面應用 修改頁面titleVue
- app直播原始碼,平臺登入頁面實現和修改密碼頁面實現APP原始碼密碼
- Godot 關於頁面修改Go
- 帝國CMS利用PHP判斷當前頁面是否為首頁PHP
- Jquery 實現頁面倒數計時的功能jQuery
- appium 如何檢測頁面文案是否正確APP
- vue 獲取頁面詳情後 切換頁面時 如何監聽使用者是否修改過資訊Vue
- 怎麼修改公司網站頁面,如何在公司網站後臺修改頁面內容網站
- 修改當前路由地址引數重新重新整理頁面路由
- 網站域名被QQ攔截提示:當前網頁非官方頁面攔截的解決辦法網站網頁
- vue重新整理當前頁面或者當前元件Vue元件
- JQuery iframe頁面jQuery
- Flutter 從當前頁面進入一個新的頁面並返回Flutter
- 微信內關閉當前頁面
- JS 檢測當前時間是否為夏令時JS
- js 怎樣判斷使用者是否在瀏覽當前頁面JS
- jquery列印頁面(jquery.jqprint)jQuery
- create-react-app修改為多頁面支援ReactAPP
- 如何對php網站頁面進行修改PHP網站
- 實現不同頁面不同頁首
- 怎樣實現每次頁面開啟時都清除本頁快取?快取
- 修改thinkphp的主頁面,連線資料庫,實現增刪改查PHP資料庫
- 用PerformanceTiming來檢測頁面效能ORM
- js/jquery禁止頁面回退JSjQuery
- Vue重新整理當前頁面幾種方式Vue
- 利用HTML5的history.replacestate()修改當前頁面的URLHTML
- 帝國CMS當前位置newsnav“首頁”兩個字修改方法
- vue學習:使用tab標籤頁時,重新整理頁面停留在當前tabVue
- ThinkPHP框架中自定義錯誤頁面和提示頁面PHP框架
- asyUI分頁中,如何實現頁面跳轉,再返回時,...UI
- 當使用者開啟一個網頁時,想一直停留在當前開啟的頁面,如何禁止頁面前進和後退網頁
- iOS UITableView資料為空時提示頁面iOSUIView
- 公司網站系統內容修改?網站後臺頁面怎麼修改?網站
- 修改網站404,網站404頁面定製方法網站
- 一種新的頁面載入時間檢測方式
- 使用 xpath 爬取當前頁面所有城市名稱
- PbootCMS模板自動生成當前頁面二維碼boot
- web頁面中接入空號檢測API教程,實現視覺化號碼檢測WebAPI視覺化