Filtrowanie inputa do formatu liczby z jednym miejscem po przecinku

Witam serdecznie,
Na stronie mam 5 inputów.

Chciałbym aby była możliwość wpisania w nich:

1. liczb tylko z jedną kropką i jednym miejscem po przecinku (np. 12.1)
2. liczby przed przecinkiem mogą składać się z max 4 cyfr

Zrobiłem taki kod:

function validateNumber() {
        var clean = this.value.replace(/[^0-9.]/g, "").replace(/(\.)\.{2,}/g, "$1").replace(/(.\d)\d+?/, "$1");
        if (clean !== this.value)
            this.value = clean;
    }

    document.querySelector('.number-mask').addEventListener('input', validateNumber);

Jednak nie do końca działa :( Mogę wpisać więcej liczb po przecinku i nie wiem jak założyć "blokadę" na liczby przed przecinkiem

Wie ktoś może jak to zrobić? Bardzo proszę o pomoc :)

https://www.w3schools.com/tags/att_input_pattern.asp

To może spróbuj:

<input type="number" min="0" max="9999.9" step=".1">

albo jednak patternem:

 <input type="text" pattern="([0-9]{1,4}|[0-9]{1,4}\.[0-9])">

Tylko zwróć uwagę, że pierwszy przykład będzie się domagał separowania przecinkiem a drugi kropką, a najlepiej dać użytkownikowi dowlność w tej kwestii.

@baracadus:

JS byłby lepszy. Tutaj mogę wpisać "1,.212"

<input type="text" pattern="([0-9]{1,4}|[0-9]{1,4}[,.][0-9])">

W pierwszym poście nie we wszystkich miejscach masz backslasha przed kropką. W wyrażeniach regularnych to ważne, bo kropka to może być dowolny znak.

W ogóle bardzo dziwne masz to wyrażenie:

.replace(/(\.)\.{2,}/g, "$1")
Zamień każdą kropkę, po której występują przynajmniej DWIE kropki
na kropkę

• nie wiem po co tu w ogóle tego $1 używasz.

.replace(/(.\d)\d+?/, "$1");
Zamień dowolny znak, po którym występuje cyfra a po nich jeszcze przynajmniej jedna cyfra
na pierwszą cyfrę, która wystąpiła po dowolnym znaku, ale olej wszystko, co wystąpiło po tej drugiej cyfrze

• nie wiem po co w ogóle używasz tu leniwych znaków powtórzeń +?.

Moja sugestia:

var clean =  this.value;
clean = clean.replace(/[^0-9,.]/g, "")         // usuń nieliczby, nieprzecinki, niekropki
clean = clean.replace(/,/g, ".")               // , -> .
clean = clean.replace(/\..*\./g, ".")          // . cokolwiek . -> .
clean = clean.replace(/(\d{4})\d+/g, "$1");    // cztery cyfry + więcej cyfr -> cztery pierwsze cyfry
clean = clean.replace(/\.(\d)\d+/g, ".$1");    // . cyfra + więcej cyfr -> . pierwsza cyfra