在 textarea 中显示换行符之间的分隔

Question

我想让 HTML5<textarea>标签的视觉表示指示何时有“硬”换行符而不是换行符。例如，给定文本：

    你好，世界\n
    你好吗，还有这篇文字
    换行，因为
    太长了。\n
    但这是一条合适的新线路。

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

    你好，世界

    你好吗，还有这篇文字
    换行，因为
    它太长了。

    但这是一条合适的新线路。

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

    你好，世界¶
    你好吗，还有这篇文字
    换行，因为
    它太长了。¶
    但这是一条合适的新线路。

理想情况下，我希望能够使用 CSS 来做到这一点，但我不确定这种视觉表示的适当（如果它甚至存在）机制是什么。

如果可能，我宁愿不必修改 textarea 的内容。

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

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

Answer 1

现场演示

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