JSFiddle - React, Tailwind, and code Playground

by vladkras

HTML

Example 1: <br/>
<input type='number'> <br/>
Example 2: <br/>
<input class="someClass" type='number'> <br/>
    <button>click</button>

JavaScript

$(window).keydown(function(e) {
    if ($('input[type=number]').index($(e.target))!=-1 && (e.keyCode>57 || e.keyCode<48)) e.preventDefault();
});

$('.someClass').focus(function() {
    $(this).prop('type', 'text')
    .keyup(function() {
        $(this).val($(this).val().replace(/[^\d|\s]/g, ''));
    })
    .blur(function() {
        $(this).val($(this).val().replace(/[^\d]/g, '')).prop('type', 'number');
    });
});

$('button').click(function(){ 
    alert('Input 1: '+$('input[type=number]').eq(0).val()+'\nInput 2: '+$('input[type=number]').eq(1).val());
});