JavaScript monitor hidden input value change

最新推荐文章于 2024-04-08 09:30:27 发布

天涯海角

最新推荐文章于 2024-04-08 09:30:27 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript input function xhtml testing html

本文链接：https://blog.csdn.net/abrahamcheng/article/details/8082479

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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>

天涯海角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript monitor hidden input value change

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
复制链接

扫一扫

专栏目录