JavaScript monitor hidden input value change

来源：互联网发布：2017年十大网络用语编辑：程序博客网时间：2024/06/05 06:52

In some scenarios of web development, we need to monitor hiddeninput value change then do something.

In my first mind, I think we can use onchange event of theelement, but when I tried it, it failed to trigger the event when I use the JavaScriptto change the value of hidden input. SoI checked the definition of this event, it says onchange event occurs only userdo some changes in the UI to cause the value change. But how can I let the enduse update the value for hidden input, thatis impossible.

Then I tried to use DOMAttrModified, but failed to trigger the event again whenexecutinghideenInput.value = "changedValue";. Then I check the definition of DOMAttrModified, it only trigger by when updating thevalue by methodsetAttribute. Ionly know the value of the hidden input will be changed, but don’t know how it change(by which way), so that approach doesn’t met my requirement either.

At last I use the onpropertychange to make it works.

Here is the script for testing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>Untitled Page</title></head><body><input type="hidden" value ="" id = "testhiden" /><script type="text/javascript" language="javascript">    var hideenInput = document.getElementById("testhiden");    hideenInput.addEventListener("DOMAttrModified", DOMAttrModifiedValueChanged, false);    hideenInput.setAttribute("onpropertychange", "onpropertychangeValueChanged()");    hideenInput.setAttribute("onchange", "onpropertychangeValueChanged()");    hideenInput.value = "ChangeValueDirectly";    hideenInput.setAttribute("value", "changeValueBysetAttribute");    function onpropertychangeValueChanged() {        if (hideenInput.value && hideenInput.value!="") // Only monitor the value change        alert('Change evnet from onpropertychange event:' + hideenInput.value);    }    function DOMAttrModifiedValueChanged() {        if (hideenInput.value && hideenInput.value != "") // Only monitor the value change        alert('Change evnet from DOMAttrModified event:' + hideenInput.value);    }    function onchangeValueChanged() {        if (hideenInput.value && hideenInput.value != "") // Only monitor the value change        alert('Change evnet from onchange event:' + hideenInput.value);    }</script></body></html>