JSFiddle - React, Tailwind, and code Playground

by therichpost

HTML

<input id="sign-number" name="sign-number" type="text" placeholder="Number?" onkeypress=" return validate_only_digits(event);">

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

#sign-number {
  background: #fff;
  border: 1px solid #0084ff;
  padding: 8px 14px;
  font-size: 15px;
  color: #0084ff;
}

JavaScript

function validate_only_digits(evt) {
            var theEvent = evt || window.event;
            var key = theEvent.keyCode || theEvent.which;
            var keychar = String.fromCharCode(key);
            var keycheck = /[0-9 ]|\-/;
            if (!(key == 8 || key == 9 || key == 27 || key == 46 || key == 37 || key == 39 || key == 40 ||key == 41 || key !=46)) {
                if (!keycheck.test(keychar)) {
                    theEvent.returnValue = false;
                    if (theEvent.preventDefault)
                        theEvent.preventDefault();
                }
            }
        }