CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
elMeroMero
elMeroMero

Reputation: 962

event.target.value becomes empty string in input[type=number] upon entering a dot

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:

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

Upvotes: 3

Views: 3327

Answers (2)

devope
devope

Reputation: 246

A possible workaround to prevent . from typing:

$input.addEventListener('keydown', (e) => {
    if(e.key === "."){
        e.preventDefault();
        // Optional alert message for a user:
        // alert('Dot is not allowed, use comma instead');
    }
});

Upvotes: 0

j0ste
j0ste

Reputation: 385

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.

Upvotes: 1

Related Questions