JSFiddle - React, Tailwind, and code Playground

by asdf

HTML

<!-- implement input field where user can type only numbers, for example:
user type 1 -> input has 1
user type 2 -> input has 12
user type a -> input has 12
user type 3 -> input has 123

Here what type of numbers it should support, examples:
1234
-123
1234.567
-0.03
0101 -->
<input class="input-number" type="text" />

JavaScript

function init() {
	$('.input-number').on('keydown', function(e) {
    // Allow shift only with Tab, dash only if it's first char, and dot only if there is no dot entered yet
    if ((e.shiftKey && e.keyCode !== 9) ||
    	(e.keyCode === 189 && $(this).val()) ||
      (e.keyCode === 190 && $(this).val().indexOf('.') > -1)) {
    	e.preventDefault();
      return;
    }
    // Allow: backspace, delete, tab, escape, enter, - and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 189, 190]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: Ctrl+V
        (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
      	// let it happen, don't do anything
      	return;
     }
     // Ensure that it is a number and stop the keypress
     if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
     }
  });
}
init();