JSFiddle - React, Tailwind, and code Playground

by vrluckyin India

HTML

<!--http://www.encodedna.com/2013/05/enter-only-numbers-using-jquery.htm-->
<div>
        <p>
            <label style="font-style:italic;">Input boxes, which accepts only 
                <strong>number</strong> and <strong>decimal</strong> values.</label>
        </p>

        <div>
            <h3>Group of Input boxes</h3>
            <input type="text" class="groupOfTexbox" /><br />
            <input type="text" class="groupOfTexbox" />
        </div>
            
        <p><label style="font-style:italic;">Input box, which accepts 
            <strong>Alphanumeric</strong> values.</label></p>
        <p><input type="text" style="text-transform:uppercase;" /></p>
    </div>

CSS

.groupOfTexbox {
            color:#000; 
            font:11px/1.5 Arial, tahoma; 
            padding:2px 4px; 
            border:solid 1px #BFBFBF; 
            border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
        }

JavaScript

$(document).ready(function() {
        $('.groupOfTexbox').keypress(function (event) {
            return isNumber(event, this)
        });
    });
    // THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE.
    function isNumber(evt, element) {

        var charCode = (evt.which) ? evt.which : event.keyCode

        if (
            (charCode != 45 || $(element).val().indexOf('-') != -1) &&      // “-” CHECK MINUS, AND ONLY ONE.
            (charCode != 46 || $(element).val().indexOf('.') != -1) &&      // “.” CHECK DOT, AND ONLY ONE.
            (charCode < 48 || charCode > 57))
            return false;

        return true;
    }