JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<textarea myholder='placeline'></textarea>
<textarea myholder="placeline\newline\new holder"></textarea>
<textarea myholder='placeline\newline\yeah\work'></textarea>
<textarea 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 () {
    a = $(this).index();
    out = newLine(a);
    $('textarea').eq(a).css('color', '#999');
    $('textarea').eq(a).val(out);
});

$('textarea').click(function () {
    a = $(this).index();
    b = newLine(a);
    c = $('textarea').eq(a).val();
    if (b == c) {
        $(this).val('');
        $('textarea').eq(a).css('color', '#000');
    }

});

$('textarea').blur(function () {
    a = $(this).index();
    b = newLine(a);
    c = $('textarea').eq(a).val();
    if (c == '') {
        $(this).val(b);
        $('textarea').eq(a).css('color', '#999');
    }
});

function newLine(kx) {
    b = $('textarea').eq(kx).attr('myholder');
    c = b.length;
    out = '';
    z = 0;
    for (k = 0; k < c; k++) {
        if (b.substr(k, 1) == '\\') {
            out = out + b.substr(z, k - z) + "\n";
            k++;
            z = k;
        }
    }
    out = out + b.substr(z, k - z);
    return out;
}