HTML number input min and max not working properly

Question

I have type=number input field and I have set min and max values for it:

Answer 1

Forget the keydown or keyup: it won't let you enter like 15 or 20 if the min was set to 10! Use the change event since this is where the input value goes in your business logic (ViewModel):

private _enforceMinMax = (input:HTMLInputElement) => {
    console.log("input", input);
    const v = parseFloat(input.value);
    if(input.hasAttribute("min")) {
        const min = parseFloat(input.min);
        if(v < min) {
            input.value = min+"";
        }
    }
    if(input.hasAttribute("max")) {
        const max = parseFloat(input.max);
        if(v > max) {
            input.value = max+"";
        }
    }
}

private _distanceChange = (event) => {
    this._enforceMinMax(event.target);
    ...