3

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!

pete
  • 2,611
  • 4
  • 29
  • 46
  • 1
    It's working fine for me in Chrome: http://jsfiddle.net/qb8Sq/ - does your code have a missing `);` at the end like your question? – Joe Oct 16 '13 at 19:21
  • @ Joe: Yes, works for me in your jsFiddle. However, I had proper closing of the block in my code, so this isn't the issue. – pete Oct 16 '13 at 21:10
  • Ok, would you be able to post your html as well? – Joe Oct 16 '13 at 21:11
  • 1
    To whomever down-voted my question as "shows no effort": I spent an hour+ on this issue; I may not be as knowledgeable as you but I don't think I'm an an idiot. As I clearly stated, my code works, except in Chrome. It's clearly some browser-specific quirk and I assumed appropriate Q for SO. Thanks and have yourself a nice day. – pete Oct 16 '13 at 21:29
  • you're writing the value of a certain input element ONLY into this input field!? Try this: `$('.inputField').blur(function() { var input = $.trim($(this).val()); $('.inputfield').val(input); });` – Xaver Oct 16 '13 at 22:01
  • @revaxarts: Tried that, even tried addressing just one field by id, wasn't working. I think your answer pretty much equals my code. Found a workaround, see below. Thanks though. – pete Oct 16 '13 at 22:06
  • Have you tried "change" instead of "blur"? – Xaver Oct 16 '13 at 22:07
  • @revaxarts: Yes, but .blur works fine. It executes, string gets trimmed, but .val(input) simply doesn't update the input field in Chrome. – pete Oct 16 '13 at 22:16
  • yep seems like jQuery is caching the result. This works btw http://jsfiddle.net/cNerB/ – Xaver Oct 16 '13 at 22:22
  • and this is also strange: http://jsfiddle.net/cNerB/2/ Chrome simple ignores trailing or leading whitespace – Xaver Oct 16 '13 at 22:30
  • For all who say it's not happening, still happens in Chrome 74 (on MacOS) but only for type="email". – RiZKiT May 16 '19 at 11:24

3 Answers3

2

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');
pete
  • 2,611
  • 4
  • 29
  • 46
2

We solved the issue (https://bugs.chromium.org/p/chromium/issues/detail?id=423785) with focusout event (which bubbles, blur doesn't) and changing the input type while trimming:

formElement.addEventListener('focusout', function(event) {
   if (event.target.type === 'email') {
      event.target.type = 'text';
      event.target.value = event.target.value.trim();
      event.target.type = 'email';
   }
});

You can still use blur, if you use addEventListener on input[type="email"], then you can omit the if statement, too.

RiZKiT
  • 1,560
  • 20
  • 18
1

It looks like a Chrome bug since it only happens when you try to set the value as the trimmed current value. If we found some solution here I'll update my answer sharing that. Actually if you split the value and update the field twice it will work but I don't think it's an acceptable workaround.

Mateus Velleda Vellar
  • 29
  • 4
  • Can you support your statement with a code example? Is there an outstanding bug report for Chrome regarding this? – Mario Tacke Apr 27 '16 at 15:14
  • 1
    @MarioTacke here you go, a bug ticket from 2014 and still valid: https://bugs.chromium.org/p/chromium/issues/detail?id=423785 – RiZKiT May 16 '19 at 11:27