JSFiddle - React, Tailwind, and code Playground

by MD RAHMAN

HTML

<div class="simpletextchart center grand">
    <div class="matable">
        <div class="center">
            <span class="elem">Texte</span>
        </div>
    </div>
</div>

CSS

input {
    background-color: transparent;
    padding: 0px;
    border: initial;
    font: inherit;
    margin: 0px;
}

* {
    text-align: center;
}

.elem {
    background-color: red;
}

.center {
    vertical-align: middle;
    display: table-cell;
    width: 100px;
    height: 100px;
    background-color: blue;
}

.matable {
    display: table;
    height: 100%;
    width: 100%;
}
.simpletextchart span {
    display: block;
    width: 100%;
}

JavaScript

$(document).ready(function(){
    elem = $(".elem");
    elem.mouseup(function(event) {
        if ($(this).children("input").length == 0) {
            var old = $(this).html();
            $(this).empty();
            var input = $('<input type=text>');
            input.val(old);
            $(this).append(input);      
            input.select();
            input.blur(function() {
                var value = $(this).val();
                if (value !== "") {
                    $(this).parent().html($(this).val());
                } else {
                    $(this).parent().html("Texte");
                }
            });
        }
    });
});