I have a problem with a jquery change event on a text input that works as expected in Firefox and IE but not in Chrome. I also have a keyup event on the text input to manipu
Actually, there's a bug on Google Chrome that causes the 'change' event to not fire if something has been changed by the 'keyup' event:
https://code.google.com/p/chromium/issues/detail?id=92492
The issue seems to be open since May 2, 2013.
You can use the input
event that works like a charm:
$('#search-form .term').bind('input', function(){
console.log('this actually works');
});
Source: https://gist.github.com/brandonaaskov/1596867
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.textInput').keyup(function (event) {
var obj = $(this);
if ((event.keyCode ? event.keyCode : event.which) === 13) {
$('#result').text('Enter has been triggered.');
}
}); ;
$('.textInput').change(function (event) {
var obj = $(this);
$('#result').text('Input text has been changed:' + obj.val());
}); ;
});
</script>
</head>
<body>
<span id="result"></span>
<br />
Enter some text and press enter:
<input type="text" class="textInput" value="" />
</body>
</html>
The change event will not fire unless the input focus switched to other controls