JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<input class="ui-input a" type="text" value="123">
    
    
<input class="ui-input b" type="text" value="abc">

    
<input class="inp" type="text" value="abc">
    <input class="inp" type="text" value="abc">
        <input class="inp" type="text" value="abc">

CSS

input{
    padding: 5px;
    outline: none;
    display: block;
}
.inp{
    cursor: pointer;
    border: solid 1px gainsboro;
    width: 200px;
    background: gainsboro;
    padding: 0 10px;
    box-sizing: border-box;
    height: 40px;
    
}
.inp:focus{
    border: solid 1px #0066ad;
    background: transparent;
    cursor: text;
}

JavaScript

(function( $ ){

    $('.inp').click(function(){
    	$(this).select();
    });
    
    
    $('.ui-input').each(function(i){
        var inputValue = $(this).val(),
        	inputWidth = $(this).css('width'),
            inputHeight = $(this).css('height'),
            inputPosition = $(this).css('position'),
            inputDisplay = $(this).css('display'),
            inputFloat = $(this).css('float'),
        	inputMargin = $(this).css('margin'),
            inputPadding = parseFloat($(this).css('padding'))+parseFloat($(this).css('border-width')),
        	inputTop = $(this).css('top'),
            inputRight = $(this).css('right'),
            inputBottom = $(this).css('bottom'),
            inputLeft = $(this).css('left'),
            maskStyles = {
                'display':inputDisplay,
                'width':inputWidth,
                'height':inputHeight,
                'position':inputPosition,
                'float':inputFloat,
                'margin':inputMargin,
                'padding':inputPadding,
                'top':inputTop,
                'right':inputRight,
                'bottom':inputBottom,
                'left':inputLeft,
                'overflow':'hidden',
                'cursor':'pointer',
                'background':'gainsboro'
            },
            inputMask = $('<span class="inputMask">'+inputValue+'</span>').attr('data-relation',i).css(maskStyles);
        $(this).before(inputMask);
        $(this).hide();
        $(this).attr('data-relation',i)
    }).focusout(function(){
        var dataRelation = $(this).attr('data-relation'),
            inputValue = $(this).val();
        $('span.inputMask[data-relation="'+dataRelation+'"]').html(inputValue).show();
        $(this).hide();
    });
    $('span.inputMask').click(function(){
    	var dataRelation = $(this).attr('data-relation');
        $(this).hide();
        $('.ui-input[data-relation="'+dataRelation+'"]').show().select();
    });
    
    
   ...