JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<h1>Works with typing, pasting and droping</h1>
<label>
    <span>Floats:</span>
    <input type="text" class="floatbox" />
</label>
<div class="small">Strips aways bad characters if pasting or dropping.  Multiple periods allowed.</div>
<br />
<br />
<label>
    <span>Integers with Valid Paste/Drops:</span>
    <input type="text" class="intbox" id="txtInt" value="8"/>
</label>
<div class="small">Will deny &#34;45test&#34; and &#34;500.03&#34; but accept &#34;3401&#34;</div>

CSS

.small{font-size:11px;}
span{display:block;}

JavaScript

$(document).on("input", ".floatbox", function(event) {
     this.value = this.value.replace(/[^0-9\.]+/g, '');
});


$(document).on("input", ".intbox", function(event) {
    var ele = $(this);
    var res = /^[0-9]*$/.test(ele.val());
    if(res) {
       ele.data("prev", ele.val());
    } else {
        ele.val(ele.data("prev"));
    }
});
$(".intbox").each(function(i, o){
    var ele = $(o);
    ele.data("prev", ele.val());
});

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (typeof value != 'undefined') {
        var ele = $(this[0]);
        if(ele.hasClass("intbox")) {
            ele.data("prev", value);  //assuming I don't need to validate
        }
        return originalVal.call(this, value);
    } else {
        return originalVal.call(this);
    }
  };
})(jQuery);


//$("#txtInt").val("43");