JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="myText1" />

JavaScript

(function($) { 
    $.fn.limitRegex = function(regex, onFail) {
        var pastValue, pastSelectionStart, pastSelectionEnd;
 
        $.each(this, function() {
            $(this).on("keydown", function() {
                pastValue          = this.value;
                pastSelectionStart = this.selectionStart;
                pastSelectionEnd   = this.selectionEnd;
            });

            $(this).on("input propertychange", function() {
                if (this.value.length > 0 && !regex.test(this.value)) {
                    if (typeof onFail === "function") {
                        onFail.call(this, this.value, pastValue);
                    }

                    this.value          = pastValue;
                    this.selectionStart = pastSelectionStart;
                    this.selectionEnd   = pastSelectionEnd;
                }
            });
        });

        return this;
    };
}(jQuery));

// limit to two decimal places
$("input").limitRegex(/^[0-9]*\.?[0-9]{0,2}$/, function() { 
    // add a design change when the regex fails
    $(this).css("border-color", "red");
}).on("keydown blur", function() {
    // remove the design change when the user types a key or exits the textbox
    $(this).css("border-color", "");
}).on("blur", function() {
    // format the number when the user exits the textbox
    var value = parseFloat($(this).val());
    if (!isNaN(value)) {
        $(this).val(value.toFixed(2));
    }
});