JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

Fiddle for number validations
<form>
    <input type="text" maxlength=20 id="txt" />
</form>

CSS

#output {
    background: #fee;
    width: 200px;
    height: 25px;
    margin: 15px 0;
    color: #a33;
}

JavaScript

function isNumber(n) {
    return (parseFloat(n) == n);
}


function print(msg) {
    $("#output").html(msg + "</br>");
}

$("document").ready(function () {
    var isNumberEntered = '';
    // commenting the below code because its not working in fiddle
   /* $('#txt').bind("cut copy paste", function(e) {
        e.preventDefault();
         alert("You cannot paste into this text field.");
        $('#txt').bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
*/
    (function (a) {
        a.onkeypress = function (e) {
            if (document.getElementById("txt").value === '') {
                isNumberEntered = '';
            }
            // alert(document.getElementById("txt").value);
            if ((e.keyCode >= 48 && e.keyCode <= 57)) {
                isNumberEntered = 'Y';
            } else {
                if (e.keyCode == 43) {
                    if (isNumberEntered != 'Y') {
                        //alert (isNumberEntered)
                        isNumberEntered = 'Y';
                        return true;
                    }
                    //var character = String.fromCharCode(e.keyCode);            
                    //alert(character);
                }
                return false;
            }
        };
    })($('txt'));

    function $(id) {
        return document.getElementById(id);
    }
});