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

【问题标题】：Show separation between newlines in textarea在 textarea 中显示换行符之间的分隔
【发布时间】：2023-03-18 01:56:01
【问题描述】：

我希望 HTML5 <textarea> 标记的可视化表示指示何时存在“硬”换行符而不是换行符。例如，给定文本：

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

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

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

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

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

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

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

我也更喜欢使用“纯”文本区域标签（而不是 TinyMCE）。

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

【问题讨论】：

你施加的限制可能使它无法回答，但这个问题很好。

标签： html css textarea newline

【解决方案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”是文本区域的 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 事件。

【讨论】：