The bug is actually around a type="number" input field, not a number in an INPUT field. But here goes my summary of it:

<!-- HTML Code //--> <input type="number" id="progress" class="form-control mr-0 pr-0" placeholder="Progress (%)" />

//JS Code $('#progress').on("change",function() { let val = $(this).val().replace(/[^0-9.]/g, '');

        // Ensure only one decimal point
        let parts = val.split('.');
        if (parts.length > 2) {
            val = parts[0] + '.' + parts.slice(1).join('');
        }

        let numVal = parseFloat(val) || 0;

        if (numVal > 100) {
            numVal = 100;
        } else if (numVal < 0) {
            numVal = 0;
        }

        $(this).val(numVal === 0 ? '' : numVal);
    });

//Reality It does this for the first iteration, but not further iterations

//Example 1. Enter "1234.456AB" into the progress field (excluding the quotation marks). 2. blur from the field to trigger the onChange. 3. Observe that it works and produces the result 100 (as per the code). 4. Type in ABCD into the progress field 5. Nothing happens. ABCD remains there.