intercept html5 number input before rendering?
Question
I want to intercept input change events before the value is rendered to the screen. This would be useful for prepending zeroes. However, this is not working.
<html>
<body>
<input id="tc" type="number" value="100"></input>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#tc").on( 'change', function() {
$("#tc").val( "12" );
})
</script>
</html>
Neither is listening on requestAnimationFrame and changing the value. What do do?
Fwiw, this works in Safari (but not Chrome and Firefox).
2 answers
solution1
2 ACCPTED 2014-07-21 20:42:53
Subscribe on keydown .
$("#tc").on( 'keydown', function(event) {
event.preventDefault();
$("#tc").val( "12" );
});
Or if you want from all the input sources subscribe for input :
$("#tc").on( 'input', function(event) {
$("#tc").val( "12" );
})
solution2
0 2014-07-21 20:48:08
First you need to set the value with $("#tc").val( "12" ); and use .on('change') when they change the value.
$("#tc").val( "0.00" );
$("#tc").on( 'change', function() {
var n = $(this).val()
$("#tc").val(n + ".00" );
});
Heres a jsFiddle example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.