JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<h2>Span min-width removed</h2>
<div id="one">
    <h4>Text()&lt;br&gt;<br/>Fails</h4>
    <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/>
</div>
<div id="one">
    <h4>Text()+ CR + &lt;br&gt;<br/>Fails</h4>
    <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/>
</div>
<div id="two">
    <h4>innerHTML<br/>Fails</h4>
    <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/>
</div>
<div id="three">
    <h4>createTextNode()<br/>Fails</h4>
    <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/>
</div>
<div id="three">
     <h4>createTextNode()+ CR +...

CSS

.simpletext {
    outline: none;
   //min-width: 8px;
    display: inline-block;
}
div {
    width: 150px;
    float: left;
}
h4{
    min-height: 20;
    border-bottom: 1px solid black;
}

JavaScript

var content = $("#one .simpletext");

content.focus(function() {
    if ($(this).text() === "Text"){
        $(this).text("").focus();
    }
});
content.blur(function() {
    if ($(this).text() === ""){
        $(this).text("Text");
    }
});


content = $("#two .simpletext");

content.focus(function () {
    if ($(this).text() === "Text") {
        this.innerHTML = "";
    }
});
content.blur(function () {
    if ($(this).text() === "") {
        this.innerHTML = "Text";
    }
});

content = $("#three .simpletext");

content.focus(function () {
    if ($(this).text() === "Text") {
        $(this).empty().append(document.createTextNode(""));
    }
});
content.blur(function () {
    if ($(this).text() === "") {
        $(this).empty().append(document.createTextNode("Text"));
    }
});