Why Does Firefox Behave Differently in \'Onchange\' Event Handling for Range Inputs?

Input Type=Range Onchange Event Behavior Difference in Firefox

Problem Statement:

While using , Firefox only triggers the 'onchange' event when the slider is dropped into a new position, whereas other browsers like Chrome initiate the event during the drag operation.

Solution:

The discrepancy in behavior arises due to different browser implementations of the 'onchange' event. As per HTML specifications, 'onchange' should only execute when the input field's value is finalized (e.g., when the mouse is released).

To address this disparity, the following solution can be employed:

Utilize the 'oninput' event, which captures value changes both during mouse drags and keyboard input, thus providing consistent behavior across browsers.

However, 'oninput' is not supported in IE10. Hence, for comprehensive compatibility, consider combining both 'oninput' and 'onchange' event handlers:

<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>

By incorporating this approach, 'onchange' events will be triggered consistently in Firefox, Safari, and Chrome, while also ensuring compatibility with IE10.

The above is the detailed content of Why Does Firefox Behave Differently in \'Onchange\' Event Handling for Range Inputs?. For more information, please follow other related articles on the PHP Chinese website!