JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<input class="hello" />

JavaScript

var replaceInput = function(target, resolveKeyCode, resolveChars) {

	resolveKeyCode = resolveKeyCode || [48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];
  resolveChars = resolveChars || '1234567890';

  // left arrow, right arrow, backspace, tab, delete
  var servicesKeyCode = [37, 39, 8, 9, 46];

  // test for physical key down
  $(document).on('keydown', target, function(e) {


    // reverse focus: tab+shift
    if (e.shiftKey && e.keyCode === 9) {
      return true;
    }

    // rus dot  
    if (e.shiftKey && e.keyCode === 191) {
      return true;
    }

    if (e.shiftKey || e.altKey) {
      return false;
    }

    return (resolveKeyCode.indexOf(e.keyCode) > -1 || servicesKeyCode.indexOf(e.keyCode) > -1);

  });


  // test for string input value
  $(document).on('keyup change paste', target, function(e) {
    var $this = $(this);
    var thisValue = $this.val();
    var inputValueArray = thisValue.split("");
    var correctValue = '';

    $.each(inputValueArray, function(i, thisLetter) {
      if (resolveChars.indexOf(thisLetter) > -1) {
        correctValue += thisLetter;
      }
    });

    if (thisValue != correctValue) {
      $this.val(correctValue);
    }
  });

  // think together this two test give a correct result
};

replaceInput('.hello');