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的内容。

我也更喜欢使用“纯”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用于不透明度）

Answer 2

“T1”是textarea的ID。使用jQuery：

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

如果不修改textarea的内容，则无法执行此操作。您无法在页面中看到自己没有的内容。在保存之前，您需要删除段落字符。将代码连接到onkeyup事件。

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

2 个答案: