html - 在文本区域中显示换行符之间的分隔

Question

我想要 HTML5 的可视化表示 <textarea>标记指示何时有“硬”换行而不是换行。例如，给定文本:

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

我想要一些由换行符分隔的行的视觉指示，例如空格:

    Hello world

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

    But this is a proper new line.

插入一个视觉字符或文本字符串来代替换行符，例如 ¶，也可以工作，即

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

理想情况下，我希望能够使用 CSS 来实现这一点，但我不确定用于这种视觉表示的适当机制(如果它存在的话)是什么。

如果可能的话，我宁愿不必修改文本区域的内容。

我也更喜欢使用“纯”textarea 标签(而不是例如 TinyMCE)。

感谢您的阅读，如有任何想法和建议，我们将不胜感激。

Answer 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 来实现不透明度)