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
- 如何使用jquery重新整理當前頁面jQuery
- app直播原始碼,平臺登入頁面實現和修改密碼頁面實現APP原始碼密碼
- 修改Thinkphp3.2中的跳轉提示頁面PHP
- ThinkPHP 在頁面獲取當前時間PHP
- vue 獲取頁面詳情後 切換頁面時 如何監聽使用者是否修改過資訊Vue
- 如何檢測頁面是否進行了縮放
- Jquery 實現頁面倒數計時的功能jQuery
- jsf2.0 tomcat 修改頁面後無法立馬看到頁面修改效果JSTomcat
- jQuery 判斷頁面元素是否存在jQuery
- appium 如何檢測頁面文案是否正確APP
- 修改了ApplicationResource,頁面出現亂碼!求助!APP
- vue重新整理當前頁面或者當前元件Vue元件
- Flutter 從當前頁面進入一個新的頁面並返回Flutter
- jquery實現返回頁面頂部功能。jQuery
- 利用jQuery實現頁面漸顯效果jQuery
- 網站域名被QQ攔截提示:當前網頁非官方頁面攔截的解決辦法網站網頁
- javascript獲取當前頁面的來路頁面地址JavaScript
- JQuery iframe頁面jQuery
- jQuery實現的關閉頁面彈出提示例項程式碼jQuery
- js倒數計時關閉當前頁面程式碼JS
- javascript實現的重新整理當前頁面程式碼例項JavaScript
- 修改維護模式導致ebs頁面打不開模式
- javascript重新整理當前頁面程式碼JavaScript
- PHP獲取當前頁面完整URL地址PHP
- jquery實現的iframe子頁面和父頁面的相互操作jQuery
- create-react-app修改為多頁面支援ReactAPP
- 實現不同頁面不同頁首
- jQuery Mobile 頁面事件jQuery事件
- jQuery + jQuery Mobile 實現省市二級下拉選單頁面jQuery
- 如何檢測頁面是否有重複的id屬性值
- jquery列印頁面(jquery.jqprint)jQuery
- js 實現在離開頁面時,對未儲存的資訊進行提醒JS
- JS 檢測當前時間是否為夏令時JS
- ThinkPHP框架中自定義錯誤頁面和提示頁面PHP框架
- ThinkPHP框架下成功、錯誤模板頁面修改PHP框架
- 關閉瀏覽器頁面時彈出是否關閉提示框瀏覽器