Home/ Questions/Q 7870065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T01:30:24+00:00

I’m trying to trigger an event handler when a script modifies an input element

  • 0

I’m trying to trigger an event handler when a script modifies an input element (text field.) On Internet Explorer, I can use the onpropertychange event, but on Firefox and other browsers there is no such event. So, according to the W3C docs, it seems the DOMAttrModified event does exactly what I want. But it doesn’t fire in Firefox 11.

Here’s a simple code snippet which reproduces the problem. I have an input text field, and a button which adds a character to the value attribute of the input text field. Clicking on the add char button should cause the DOMAttrModified event to fire:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function addChar() {
                var q = document.getElementById("query");
                q.value += "X";
            }

            function loadevents() {
                var q = document.getElementById("query");
                q.addEventListener("DOMAttrModified", function() {alert("DOMAttrModified event!");
                }, false);
            }
        </script>
    </head>
    <body onLoad="loadevents()">
        <input type="text" id="query">
        <br>
        <input type="submit" value="add char" onclick="addChar()">
    </body>
</html>

But it doesn’t. Any idea what I’m doing wrong? (I know that DOM Level 3 deprecates this event, but there doesn’t seem to be a viable alternative right now. As far as I know, Firefox 11 still supports it.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Changing the value in an input doesn’t fire the DOMAttrModified event, that’s all..

    You need to change the attribute of the input node, not the property of the variable.
    It’s like the difference between the two jQuery functions: .prop and .attr

    Read:

    • 0