JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<label for="reti-non-rate-of-annual">Expected rate of annual return</label>
                <input id="reti-non-rate-of-annual" type="number" value="" name="reti-non-rate-of-annual" step="0.1" min="1" max="15" maxLength="5" />

JavaScript

jQuery(document).on("input", "#reti-non-rate-of-annual, #reti-tfsa-rate-of-annual, #reti-rrsp-rate-of-annual, #non-rate-of-annual, #tfsa-rate-of-annual, #rrsp-rate-of-annual", function () {
  if(jQuery(this).val() != "" && jQuery(this).val() != 0 && jQuery(this).val() != "0.") {
    if (parseInt(this.value) >= parseInt(this.max)) {
    	jQuery(this).val(this.max);
    } else if(parseInt(this.value.length) > parseInt(this.maxLength)) {
        jQuery(this).val(Math.ceil(this.value));
    }
  }
});