我应将哪种事件类型与“范围”类型的输入一起使用？

Question

I have a form with several inputs of type 'range', and which has a submit button that's hidden until each range input fires an event. I'm curious as to which type of event to select for this purpose.

If using 'click' events, some older browsers (ie Windows' Safari) won't always register the events. It's probably not a good idea to use 'mouseup', since on legacy browsers, or on some mobile browsers, the range inputs will instead be generated as regular input boxes. Doing something like the following, simply does not trigger an event on the Opera browser running on Android (on which the range inputs are rendered as regular text input boxes):

$('#my_form input').on("mouseup change", function(){ ... }

So my question is, which event type should I choose that would work well on legacy, mobile, and modern browsers, and would avoid the problems listed above?

Answer 1

Apparently Chrome and Safari are wrong: onchange should only be triggered when the user releases the mouse. To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:

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

Check out this Bugzilla thread for more information.

Answer 2

You can use the change event:

$('#my_form input').on("change", function(){ ... }

or:

$('#my_form input').change(function(){ ... }

This will work even if the browser renders the range input as a regular text input.