Binding to both events is the typical way to do it. You can also bind to the paste event.
You can bind to multiple events like this:
$("#textbox").on('change keyup paste', function() {
console.log('I am pretty sure the text box changed');
});
If you wanted to be pedantic about it, you should also bind to mouseup to cater for dragging text around, and add a lastValue
variable to ensure that the text actually did change:
var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
if ($(this).val() != lastValue) {
lastValue = $(this).val();
console.log('The text box really changed this time');
}
});
And if you want to be super duper
pedantic then you should use an interval timer to cater for auto fill, plugins, etc:
var lastValue = '';
setInterval(function() {
if ($("#textbox").val() != lastValue) {
lastValue = $("#textbox").val();
console.log('I am definitely sure the text box realy realy changed this time');
}
}, 500);
On modern browsers, you can use the input
event:
DEMO
$("#textbox").on('input',function() {alert("Change detected!");});
$(this).bind('input propertychange', function() {
//your code here
});
This is works for typing, paste, right click mouse paste etc.
if you write anything in your textbox, the event gets fired.
code as follows :
HTML:
<input type="text" id="textbox" />
JS:
<script type="text/javascript">
$(function () {
$("#textbox").bind('input', function() {
alert("letter entered");
});
});
</script>
Try this:
$("#textbox").bind('paste',function() {alert("Change detected!");});
See demo on JSFiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With