JSFiddle - React, Tailwind, and code Playground

by Kelvin Russell

HTML

<div id="gps"><span>GPS (X,Y):&nbsp</span><div id="coords"><span>(</span><input class="coord"/><span>,</span><input class="coord"/><span>)</span></div></div>

CSS

#gps span{    
    float:left;
    background-color: transparent;
    border: 0px;
    font: 24px Ubuntu;
    font-weight: bold;
    color: white;
    outline: none;
    box-shadow: none;
    background-color:rgba(0,0,0,0);
}
#gps>span{
  margin-top:3px;
  font: 25px Ubuntu;
  font-weight: bold;
}
div#gps{
    padding: 6px 10px;
    float:left;
    color: white;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.49803);
    white-space:nowrap;
}
div#coords{
    padding: 2px 2px;
    float:left;
    color: white;
    border:1px solid light-blue;
    background-color: rgba(0, 0, 0, 0.49803);
    white-space:nowrap;
    background-color: rgba(0, 0, 0, 0.49803);
}
input.coord{
    font: 23px Ubuntu;
    float:left;
    width:50px;
    margin:0 2px;
    color: white;
    background:transparent;
    font-weight: normal;
    white-space:nowrap;
    outline: none;
}

JavaScript

document.getElementsByClassName("coord")[0].onkeypress=function(e){var a=!1;if(e.keyCode==(44||13)){e.preventDefault();$(".coord")[1].focus()}else if(48>e.keyCode||e.keyCode>57){e.preventDefault();a=!0}if(this.value.length==4)e.preventDefault();if(this.value.length==3){$(".coord")[1].focus()}};
document.getElementsByClassName("coord")[1].onkeypress=function(e){if(e.keyCode==13||this.value.length==4){e.preventDefault();var a=document.getElementsByClassName("coord");window.nav(a[0],a[1])}else if(this.value.length>=3){var a=document.getElementsByClassName("coord");window.nav(a[0],a[1])}};