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.
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>
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
}
});
©2020 All rights reserved.