1

https://jsfiddle.net/ElMeroMero/2e4jmro3/7/

I have an onChange handler on an input[type=number] that is causing problems because of the input fields strange behaviour: Upon entering the dot before the decimals the value becomes an empty string.

Why is that?

screencast of unexpected behaviour

Update:

It seems to be a chrome issue. I tested in the following browsers and there the above behaviour did not occur:

  • MacOS, Firefox 83.0 (64-bit)
  • MacOS, Safari Version 14.0.1 (15610.2.11.51.10, 15610)

My Chrome Version (MacOS): 86.0.4240.183 (Official Build) (x86_64)

elMeroMero
  • 752
  • 6
  • 18
  • 1
    What browser are you using? This is not an issue for me on Chrome 86 – Liftoff Nov 19 '20 at 22:34
  • Chrome Version 86.0.4240.183 (Official Build) (x86_64) but I just tested it on safari and there indeed it works. Could it be a Chrome bug? – elMeroMero Nov 19 '20 at 22:37
  • It might be. I'm on 86.0.4240.1**93**, but I doubt such a small version change would make a difference. – Liftoff Nov 19 '20 at 22:39
  • As a sidenote: by definition input type number validates on Number and not on parseFloat. – JavaScript Nov 19 '20 at 22:41
  • 1
    I am having the same behaviour on my Chrome *87.0.4280.66*. – Lain Nov 19 '20 at 22:42
  • @Lain you mean same like displayed in the screenshot, right? – elMeroMero Nov 19 '20 at 22:56
  • @elMeroMero: Yes, same issue as you got. However, according to mdn, decimals should be invalid altogether unless `step` is specified. Feels like a browser bug to me. – Lain Nov 20 '20 at 07:42

1 Answers1

2

I believe it's because of your system language settings. If decimal comma is a thing in your country, you should use a comma instead of a dot.

You can set step="0.1" attribute to the input and see for yourself, what is the right decimal symbol in your system/browser. Also see this topic about input type number localization.

j0ste
  • 379
  • 1
  • 7
  • The `step` did not fix it for me. – Lain Nov 20 '20 at 07:43
  • My system settings is German. But ```step="0.1"``` doesn't fix the issue, however, entering "21," (with comma instead of point) does work, so this might be indeed related to the system language setting. Yet this does not "justify" the behavior because the input takes "21.5" as value so why not taking "21." as value? – elMeroMero Nov 20 '20 at 07:48
  • 1
    `step="0.1"` was not supposed to fix the issue. It was only a suggestion to see which is the right decimal separator in your system/browser settings. If you have numpad on your keyboard you could just press [del] key between zero and secondary enter. I guess it's simply because it's not gramatically correct. When you type some decimals after, there is obviously some parsing happening for usability reasons. Without decimals the dot is considered not valid character in a number. If you want a "fix", just use input type text with a pattern specified. – j0ste Nov 20 '20 at 16:19
  • But the "rule" of input[type=number] is that when you enter something not valid it is not displayed at all. But here the dot is displayed, but the event.target.value is emptied. That's why this seems to be a chrome bug. – elMeroMero Nov 20 '20 at 18:34
  • Firefox and Edge on my Win 10 behave the same way FYI. I really don't think it's a bug. More likely the dot is allowed because some regions have both decimal period and comma and it would be just a complication for many users not to allow it. – j0ste Nov 20 '20 at 19:27
  • 1
    I'm fine with allowing it, but why is e.target.value becoming empty? That's my whole issue with this behavior. (because while the user types, e.g. ````2.34```` the moment he types the dot just before entering the ````34```` the onchange returns an empty value to my function. – elMeroMero Nov 20 '20 at 19:43