Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onchange event for input type="number"

Tags:

html

jquery

How can I handle an onchange for <input type="number" id="n" value="5" step=".5" /> ? I can't do a keyup or keydown, because, the user may just use the arrows to change the value. I would want to handle it whenever it changes, not just on blur, which I think the .change() event does. Any ideas?

like image 467
Ian Davis Avatar asked Mar 07 '12 21:03

Ian Davis


People also ask

How do you change the input type to a number?

<input type="number"> <input> elements of type number are used to let the user enter a number.

How do I allow only input field numbers?

By default, HTML 5 input field has attribute type=”number” that is used to get input in numeric format. Now forcing input field type=”text” to accept numeric values only by using Javascript or jQuery. You can also set type=”tel” attribute in the input field that will popup numeric keyboard on mobile devices.

What triggers Onchange event?

The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.


2 Answers

Use mouseup and keyup

$(":input").bind('keyup mouseup', function () {     alert("changed");             }); 

http://jsfiddle.net/XezmB/2/

like image 165
JohnColvin Avatar answered Oct 23 '22 21:10

JohnColvin


The oninput event (.bind('input', fn)) covers any changes from keystrokes to arrow clicks and keyboard/mouse paste, but is not supported in IE <9.

jQuery(function($) {    $('#mirror').text($('#alice').val());      $('#alice').on('input', function() {      $('#mirror').text($('#alice').val());    });  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <input id="alice" type="number" step="any" value="99">    <p id="mirror"></p>
like image 30
Flo Avatar answered Oct 23 '22 19:10

Flo