jQuery: How to update input field value (not working in Chrome)

Question

Currently, I have a number of input fields sharing the same class inputField, and I have a .blur event which trims any strings entered on focus-out and updates the field with the result, like so:

$('.inputField').blur(function() {
   var input = $.trim($(this).val());
   $(this).val(input);
});

Here is the HTML:

<div class='form'>
   <label>Email Address:</label>
   <input id='input_emailAddress' class='inputField' type='email' name='input_emailAddress'>
   <label>Confirm Email:</label>
   <input id='input_emailAddressConf' class='inputField' type='email' name='input_emailAddressConf'>
</div>

Works great in Firefox, Safari, but not in Chrome (not sure about IE). I tried removing/re-adding the class to force a "refresh" but no go. Is it a known issue? Curious what a good/clean solution would be? Thanks!

Edit P.S. Again, the code itself works fine. It's not a syntax problem -- JSHint is all clear, no errors in console. It only doesn't work in Chrome (ver 30.0+) Thanks!

Answer 1

Found an 'ugly' workaround which seems to cooperate in all three browsers:

Added an extra class with nothing inside to the CSS input.refresh {}, then added the following code to force a refresh:

$(this).addClass('refresh').removeClass('refresh');