JSFiddle - React, Tailwind, and code Playground

by vincentpace

HTML

<input type="text">
<input type="number">
<br>
<input type="text">
<input type="number">
<br>
<input id="a" value="a" />
<input id="b" value="b" style="display:none;" />

CSS

[type='text'] {background-color:yellow;}
[type='number'] {background-color:orange;}

JavaScript

$(document).ready(function(){
    $('[type="number"]').hide();
    $('[type="text"]').on('focus',function(){
        $(this).next().show().focus();
        $(this).hide();
    });
    $('[type="number"]').on('blur',function(){
        // Modelled after JavaScript below to work in Firefox
        var $this = $(this);                          // Needed to work in Firefox
        setTimeout(function() {                       // Needed to work in Firefox
            if(!$(document.activeElement).is($this)){ // Needed to work in Firefox
                $($this).hide();
                $($this).prev().show();
            }
        }, 0);                                        // Needed to work in Firefox
    });
});

// JavaScript forked from http://stackoverflow.com/a/24695316/1652620

var a = document.getElementById("a");
var b = document.getElementById("b");

function show(elem) {elem.style.display = 'inline-block';}
function hide(elem) {elem.style.display = 'none';}

a.onfocus = function() {
    show(b);
    b.focus();
    hide(a);
};

b.onblur = function() {
    setTimeout(function() {
        if(document.activeElement !== b){
            hide(b);
            show(a);
        }
    }, 0);
};