JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<div>
  <span for="tt">Text</span>
  <input type="text" id="tt">
  <br/>
  <span for="numbers">Digits</span>
  <input type="text" id="numbers">
  <br/>
  <span for="alphas">Alpa</span>
  <input type="text" id="alphas">
  <br/>
</div>

CSS

input {
  margin-left: 10px;
}

JavaScript

$(document).ready(function() {
  $("#tt").keydown(function(event) {
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
      $('#numbers').val($('#numbers').val() + String.fromCharCode(event.keyCode));
    } else if (event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
      $('#alphas').val($('#alphas').val() + String.fromCharCode(event.keyCode));
      //event.preventDefault();
    }
    // else the key should be handled normally 
  });
});