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

Question

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.

Answer 1

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 2

Yes, certain browsers (such as Firefox) will fire an onclick or onfocus event on hidden elements when they're activated via an accesskey attribute (meant to provide a keyboard hotkey to jump to an input).

Open the below in firefox, focus the frame, then strike Alt+Shift+x (Windows and Linux) or Ctrl+Alt+x (Mac).

<input type="hidden" accesskey="x" onclick="alert('clicked!');" />

Answer 3

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
    }
});

Answer 4

Facing the problem I needed to react on change of hidden inputs which were modified by code which was out of my control, I got inspired by JS onchange hack for input[type=hidden] and created following solution for my problem using MutationObserver

Request: I want to have function FAM.processFields run whenever any of selected subset of form fields (expressionFields) changes its value.

Problem: Some of the form fields are of type="hidden", so change event is never fired for them.

Solution:

var index, elementId, element;
var elementIdPrefix = g_form.getTableName() + ".";
var expressionFields = this.getExpressionFieldNames();

// As trigger either Event or MutationRecord is passed, depends on input type
var processFieldsCallback = (function(trigger) {
  // Relies on instance of - FAM object - added in onLoad script
  FAM.processFields();
});

var changeOfValueConfig = {attributeFilter: ["value"]};

var processFieldsObserver = new MutationObserver(processFieldsCallback);

if (this.debug) {
  console.log("addChangeEventListeners to expressionFields");
  console.log(expressionFields);
}

for (index = 0; index < expressionFields.length; index++) {
  elementId = elementIdPrefix + expressionFields[index];
  element = document.getElementById(elementId);
  // In case of hidden input (e.g. glideList, fieldList, checkbox) we need to register an observer to it
  if (element.getAttribute("type") && element.getAttribute("type").toLowerCase() == "hidden") {
    processFieldsObserver.observe(element, changeOfValueConfig);
    if (this.debug) {
      console.log("register processFieldsObserver of changeOfValueConfig on elementId " + elementId);
      console.log(element);
    }
  }
  else {
    element.addEventListener("change", processFields);
    if (this.debug) {
      console.log("addChangeEventListeners on elementId " + elementId);
      console.log(element);
    }
  }
}   

Answer 5

You can still trigger events on hidden input using labels

The accepted answer claims that: "The user won't be able to trigger events to your input.", but this is not true.

A label connected to an input element can also trigger an input, so even though the input element itself is hidden, if properly connected to a label the user can trigger the input by its label:

There are two ways to connect an input to a label,

1. Use the id of the input element in the for attribute:

   <label for="checkbox">Label</label><input type="checkbox" id="checkbox"/>

2. Or simply wrap the input inside a label:

   <label><input type="checkbox"/>Label</label>

See a working code example here in fiddle or below:

---

const onChange = (event) => {
  console.log(event);
  const checkbox = event.target;
  alert("checkbox value is: " + checkbox.checked);
}

document.getElementById('checkbox').addEventListener('change', onChange);

input[type="checkbox"] {
  visibility: hidden;
}

label {
  font-weight: bold;
}

<label>
  <input id="checkbox" type="checkbox"/>
  label for hidden checkbox
</label>