js检测输入域的值是否变化

场景：

　　用户在新建或编辑表单数据时，操作关闭按钮，如果有输入项已经变动时，提示用户存在信息变更，是否放弃当前操作。

 

初始值情景：

　　1、通过原生的value指定，如： <input value='26'/>

　　2、通过js脚本设置（如前端框架组件初始化），如： document.querySelector('input').value = '26'

先提供初始化"初始值"及检测值变动的原生js脚本（依赖jquery）：

/**
* 初始化初始值
* @param ctn: 初始化范围，默认document
**/
function initInputs(ctn){
  ctn = ctn || document;
  $(':input',$(ctn)).each(function(idx,domItem){
    domItem.setAttribute('value',domItem.value);
  });
}
/**
* 检测值是否已变更
* @param ctn: 初始化范围，默认document
* @return boolean: true-有变动、 false-无变动
**/
function chargeInputs(ctn){
  ctn = ctn || document;
  var isChanged = false;
  $(':input',$(ctn)).each(function(idx,domItem){
    var originalValue;
    if(domItem.attributes.value) originalValue = domItem.attributes.value.value;
    if(domItem.value != originalValue) isChanged = true;
  });
  return isChanged;
}

 

何时调用初始化"初始值"脚本？

　　一般情况，在执行完输入域的初始设值之后调用initInputs即可；

　　如果项目中用到了前端框架，以easyui为例，需要在组件解析完成时调用initInputs，如下：

$.parser.onComplete=function(context){
  initInputs(context);
}

完毕 \(^o^)/