JSFiddle - React, Tailwind, and code Playground

by Akatsukle

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() {
    if ($(this).html() === "Text"){
        /*var el = $(this);
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart($(this)[0], 2);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);*/
        $(this).html("");
        //$(this).empty();
    }
    console.log($(this)[0]);
});
content.blur(function() {
    if ($(this).html() === ""){
        $(this).html("Text");
    }
});