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^)/