在textarea中显示换行符之间的分隔 [英] Show separation between newlines in textarea

问题描述

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

I would like to have the visual representation of an HTML5 <textarea> tag indicate when there are 'hard' newlines as opposed to wrapping. For example, given the text:

    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.

我想有一些视觉指示，用新行来分隔的行，例如空格：

I would like to have some visual indication of the lines separated by newlines such as white-space:

    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.

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

Inserting a visual character or text string in place of the newline such as ¶, could also work i.e.

    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做到这一点，但我不知道什么是合适的）机制将是这样的视觉表示。

Ideally I'd like to be able to do this with CSS, but I'm not sure what the appropriate (if it even exists) mechanism would be for such a visual representation.

如果可能，我不想修改textarea的内容。

I'd prefer to not have to modify the contents of the textarea, if possible.

我也喜欢使用纯textarea标签（相对于TinyMCE）。

I'd also prefer to work with a "pure" textarea tag (as opposed to e.g. TinyMCE).

感谢您阅读，任何想法和建议都会感激。

Thank you for reading, any thoughts and suggestions would be appreciated.

推荐答案

现场演示

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以获得不透明度）

Note: Tested on Firefox 3.6.x only. (IE will need some different CSS for opacity)

这篇关于在textarea中显示换行符之间的分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！