Показать разделение между символами новой строки в textarea

Я бы хотел, чтобы визуальное представление тега HTML5 <textarea> указывало, когда есть "жесткие" символы новой строки, а не упаковка. Например, учитывая текст:

    Hello, world\n
    How are you, and this text
    wraps to a new line because
    it too long.\n
    But this is a proper new line.

Я хотел бы иметь визуальную индикацию линий, разделенных новыми строками, такими как white-space:

    Hello world

    How are you, and this text
    wraps to a new line because
    it too long.

    But this is a proper new line.

Вставка визуального символа или текстовой строки вместо новой строки, такой как ¶, также может работать.

    Hello world¶
    How are you, and this text
    wraps to a new line because
    it too long.¶
    But this is a proper new line.

В идеале я хотел бы иметь возможность сделать это с помощью CSS, но я не уверен, что для такого визуального представления будет подходящий (если он вообще существует) механизм.

Я бы предпочел не изменять содержимое текстового поля, если это возможно.

Я также предпочел бы работать с "чистым" тегом textarea (в отличие от, например, TinyMCE).

Спасибо за чтение, любые мысли и предложения будут оценены.

Ответ 1

Live Demo

<style type="text/css">
#myform textarea {
    border: 1px solid #000;
    position: absolute;
}
#myform #source {
    background: transparent;
    z-index: 1;
}
#myform #mirror {
    color: rgba(0,0,0,0.5);
    z-index: -1;
}
</style>

<script type="text/javascript">
$("#source").keyup(function() {
    $("#mirror").val($("#source").val().replace(/\n/g,"¶\n"));
});
</script>

<form id="myform">
    <textarea id="source" rows="10" cols="40"></textarea>
    <textarea id="mirror" rows="10" cols="40"></textarea>
</form>

Примечание. Проверено только на Firefox 3.6.x. (Для непрозрачности IE потребуется несколько CSS)

Ответ 2

"T1" - это идентификатор текстового поля. Использование jQuery:

var content = $('#T1').html().replace(/¶/g,"") //get rid of existing indicator
content = $('#T1').html().replace(/\n/g,"¶\n") //add indicator
$('#T1').html(content)

Вы не можете сделать это без изменения содержимого текстового поля. Вы не можете видеть, что у вас нет на вашей странице. Перед сохранением вам нужно вычеркнуть символ абзаца. Подключите код к событию onkeyup.