1

I'm working on a cross-browser compatibility issue with HTML input fields.

On my Chrome 63.0, when I pressed enter in an input[type=text], it triggers change event, and no blur event is fired. ( I tired with this https://jsfiddle.net/agentmilindu/ekhT4/2984/ )

However, I see in some browsers, a blur event is triggered when pressing enter.

I see lot of question on StackOverflow asking how to stop triggering this blur event when enter is pressed,

  1. Prevent both blur and keyup events to fire after pressing enter in a textbox
  2. onkeypress + onblur in javascript

The app( a PhoneGap app written in React ) I'm currently investigating has a function which gets triggered by blur event when the user press enter, but in new browsers ( new phones and on my Chrom 63.0 also ) this is not working.

Now I'm confused what is the actual default behaviour when someone press enter in an input[type=text] filed. Should it be change+blur or only change? Is there any document which I can refer?

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Milindu Sanoj Kumarage
  • 2,714
  • 2
  • 31
  • 54
  • A blur event is triggered on a 'focus out' situation; I hope that much is clear; So when you hit enter, focus exits input box, thus blur gets invoked. In ur fiddle, I didnt see blur invoked on pressing enter (m using chrome 61) – Rajkumar Somasundaram Nov 22 '17 at 06:08
  • Yes, I too don't get a `blur` event when I press `enter` in the fiddle. Is that the default behaviour? But I see some getting a `blur` event too. At least the app I'm investigating is expecting a `blur` event to be trigger when `enter` key is pressed. @RajkumarSomasundaram – Milindu Sanoj Kumarage Nov 22 '17 at 06:15
  • The [first question](https://stackoverflow.com/questions/11143011/prevent-both-blur-and-keyup-events-to-fire-after-pressing-enter-in-a-textbox) you linked to had this behavior because they called `alert()` inside the `change` event handler, thus making the whole page loose focus ([fiddle](https://jsfiddle.net/ekhT4/2985/)). The second question doesn't seem to imply the behavior your describe happen. It's a long time I read these specs, but IIRC, pressing enter in an input shouldn't not make it loose focus. So the best for you is to ask the guy who wrote that script why he did so like that. – Kaiido Nov 22 '17 at 07:25
  • Oh actually they possibly thought about the *next* button you've got instead of the default enter on mobile devices when the input is part of a
    .
     – Kaiido Nov 22 '17 at 07:35
  • @Kaiido Oh, yes, maybe they thought of the `next` button on the mobile devices. But on my device, I don't see this happening and I don't see a `next` button even. :/ – Milindu Sanoj Kumarage Nov 22 '17 at 08:37
  • You need to wrap your inputs in a `
    ` element https://jsfiddle.net/ekhT4/2986/
     – Kaiido Nov 22 '17 at 08:38
  • @Kaiido my mobile device( Android O, Chrome 61.0 ) still does not take me to the next field nor trigger the `blur` event :/ – Milindu Sanoj Kumarage Nov 22 '17 at 09:01
  • 1
    Ah weird, my chrome 62 and FF 53 on Android N do both show it. Might also be dependent on the virtual keyboard used. But anyway, the default for enter is just trigger check-for-changes, and not blur by default. However, some users might indeed have this *next* button if the inputs are in a same form. But then the blur event would trigger because they did switch to a new input. – Kaiido Nov 22 '17 at 09:08

1 Answers1

0

I cant say much for apps, but for browsers; (i tried your fiddle in both chrome 61 and Firefox 55), these are my observations;

1) blur is triggered on focus out; text changes or not doesn't matter; if there is focus out, then blur triggers

2) change is triggered only if:

i)  text content changes within the input box changes
ii) enter key is pressed

either alone will not trigger change;

Hope this helps.

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Rajkumar Somasundaram
  • 1,225
  • 2
  • 10
  • 20