Does HTML Hidden control have any events? Like onchange or something?

Can I attach any event handlers to HTML hidden input fields? Basically I want to run a function when a hidden input field value changes.

Answers:

Answer

Events are only triggered when the user performs the event in the browser, so if it's <input type="hidden"> or an <input> hidden by CSS, the user won't be able to trigger events to your input.

The only way you would get onchange to work is if you manually trigger onchange in Javascript. A quick example of this:

<form name="f" onsubmit="document.f.h.value='1'; 
                         document.f.h.onchange(); 
                         return false;"
>
    <input type="hidden" name="h" value="0" onchange="alert(document.f.h.value);" />
    <input type="submit" />
</form>

Answer

JavaScript has focus events for the elements. There are three focus events: focus, focusin, and focusout.

I discovered focusout will trigger when an element display state is change for both block and none, while focusin only triggered for display state of block.

document.getElementById('element_id').addEventListener('focusout',function(e){
    if (this.style.display === "none") {
       // perform operations when the element is hidden, like clear fields, etc.
    } else {
       // perform operations when the element is displayed, like populate fields
    }
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.