验证用户是否修改过页面的数据的实现方法_Javascript教程-查字典教程网
验证用户是否修改过页面的数据的实现方法
验证用户是否修改过页面的数据的实现方法
发布时间:2016-12-30 来源:查字典编辑
摘要:起因:在实现程序的修改模块时,要在页面端检查用户是否修改过数据,以便提醒用户及时保存修改后的数据。实现要求:判断用户是否修改了输入的内容,要...

起因:

在实现程序的修改模块时,要在页面端检查用户是否修改过数据,以便提醒用户及时保存修改后的数据。

实现要求:

判断用户是否修改了输入的内容,要能判断input中的checkbox,text,radio等,不知道会多少个input,也不知道input的ID和name,要在客户端判断是否修改,不能产生提交。还要同时满足IE和firefox两种环境。也要支持master和content页的使用。

解决方案;

处理思路:在页面加载时记录所有的input的值或状态,如果要求在用户进行修改操作时立即调整控件状态,则在数据区div上的onclick和onkeypress事件里调用检查数据是否改变的函数,并设置相应控件的状态(用ha_setch())。如果是在提交或用户手动控制检查过程时,则在相应的操作事件中调用检查数据是否改变(例在button的onclick()中使用ha_checkin()控制提交)。

以下是实现代码

var ha_last=new Array;//定义一个全局的空对象,存放所有的初始值。

function ha_get()//读取初始值

{ var ha_input = document.getElementsByTagName("input");

for (var i=0;i<ha_input.length;i++)

{

if (ha_input[i].type=="password"){ ha_last.push(ha_input[i].value);}//根本页面需要设置type的值和对象属性

if (ha_input[i].type=="radio") {ha_last.push(ha_input[i].checked);}//要保证检查的范围是否准确

}

}

window.onload=ha_get;//绑定读取初始值的函数

function ha_checkin()//检查新的输入值和初始值是否相等。返回判断结果。true为没有发生修改,false为有修改。

{ var ha_now=new Array;

var ha_input = document.getElementsByTagName("input");

for (var i=0;i<ha_input.length;i++)

{

if (ha_input[i].type=="password"){ ha_now.push(ha_input[i].value);}//根本页面需要设置type的值和对象属性。

if (ha_input[i].type=="radio") {ha_now.push(ha_input[i].checked);}//也要保证和ha_get()中检查的标签相一致

}

if (ha_now.toString()==ha_last.toString())//没修改

{return true;}

else//有修改

{return false;}

}

function ha_setch(){//设置相应的控件状态

if (ha_checkin())//没有变化

//改变控件的显示和功能状态

else//有变化

//改变控件的显示和功能状态

}

注:以上解决方案只在IE6和firefox3.0。2中测试并通过。没有在其它的浏览器中测试。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类