JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<textarea data-myholder='placeline'></textarea>
<textarea data-myholder="placeline\newline\new holder"></textarea>
<textarea data-myholder='placeline\newline\yeah\work'></textarea>
<textarea data-myholder='Steven Paul Jobs\Palo Alto, California, US\Feb 24, 1955 – Oct 5, 2011'></textarea>

CSS

textarea {
    display: block;
    width: 300px;
    height: 80px;
}

JavaScript

$('textarea').each(function () {
    var a = $(this),
        out = newLine(a);
    a.css('color', '#999');
    a.val(out);
}).focus(function () {
    var a = $(this),
        b = newLine(a),
        c = a.val();
    if (b == c && !a.data('input')) {
        a.val('');
        a.css('color', '#000');
    }

}).blur(function () {
    var a = $(this),
        b = newLine(a),
        c = a.val();
    if (c == '') {
        a.data('input', false);
        a.val(b);
        a.css('color', '#999');
    }
}).on('input keyup paste', function () {
    $(this).data('input', true);
});


function newLine(kx) {
    var b = kx.data('myholder');
    return b.replace(/\\/g, "\n");
}