JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<span class="simpletext" contenteditable="true">Text</span><br/>
<span class="simpletext" contenteditable="true">Text</span><br/>
<span class="simpletext" contenteditable="true">Text</span><br/>
<span class="simpletext" contenteditable="true">Text</span><br/>
<span class="simpletext" contenteditable="true">Text</span><br/>
<span class="simpletext" contenteditable="true">Text</span><br/>

CSS

.simpletext{
    outline: none;
    min-width: 8px;
    display: inline-block;
}

JavaScript

var content = $(".simpletext");

content.focus(function() {
    var $this = $(this);
    if ($this.html() === "Text"){
        // Set the min size to the current size before removing the text
        $this.css('min-width', $this.innerWidth());
        $this.html("");
    }
    console.log($(this)[0]);
});
content.blur(function() {
    var $this = $(this);
    if ($this.html() === ""){
        // Set the min size back to its value in the CSS
        $this.css('min-width', '');
        $this.html("Text");
    }
});