JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<input type="text" id="top">
    
        
        <input type="text" id="bottom">
    
    <input type="text" id="topfname">
        
    <input type="text" id="bottomfname">

CSS

6566676869707172737475767778798081828384858687888990

JavaScript

var alphabee = ['0', '1', '2', '3', '4', '5', '6', '7', '', '', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '-', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ];

document.getElementById('top').onkeyup = function(e) { 
var c=alphabee[e.keyCode];
    if (c.indexOf("undef") < 0 ){
 
$("#topfname").val($("#topfname").val()+c);
    }     
}


document.getElementById('bottom').onkeyup = function(e) { 
var c=alphabee[e.keyCode];
    if (c.indexOf("undef") < 0 ){
$("#bottomfname").val($("#bottomfname").val()+c);
        
    }
}