How to Achieve Consistent Behavior of Input Type=Range onchange Event Across Browsers?

Inconsistent Behavior of Onchange Event for Input Type=Range in Firefox vs. Other Browsers

When working with , a notable difference between Firefox and other browsers is the behavior of the onchange event. In Firefox, this event triggers only upon releasing the slider, while other browsers invoke it throughout the dragging process.

To achieve consistent behavior across browsers and obtain live updates while dragging, utilize the oninput event in conjunction with onchange. This approach captures updates in Firefox, Safari, and Chrome, regardless of the input source (mouse or keyboard).

Here's an updated code sample:

<code class="html"><span id="valBox"></span>
<input type="range" min="5" max="10" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)" /></code>

This combined event handling ensures that the showVal function is invoked during both the dragging phase (oninput) and the value release moment (onchange), providing a consistent experience across all major browsers. Check out the Bugzilla thread for further details on this behavior discrepancy.

The above is the detailed content of How to Achieve Consistent Behavior of Input Type=Range onchange Event Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!