Question

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.

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.

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.

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

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.

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>

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