Textarea With Partly Fixed Content

The content of a textarea field is treated as plain text and so it cannot be styled in the way that HTML can be styled. Those editors that allow you to apply styles to what appears to be textarea content are actually using sophisticated JavaScript to overlay the textarea with fields containing the styled content. Another thing that cannot be done with a single textarea is to make part of the content read only while allowing your visitor to enter or update the rest. Where we want some of the text to be fixed and allow our visitor to enter the rest we don't need sophisticated scripts to do overlays though.

The simplest way to give the appearance of a textarea where part of the content is fixed and part acts like an ordinary text area is to set up two textareas. The first textarea will contain the fixed part of the content and is defined with the readonly flag set to prevent it being updated. The second textarea is defined as a regular textarea where the content can be easily changed. To be able to easily style both textareas together we'll wrap them inside a div tag (which we will also need to fix a border problem in Opera.

Now all that we need to do is to make the two textareas look as if they are a single textarea in order that they behave the way we want on the web page and to concatenate the two fields together after the form is submitted so that the content of the two textareas can be treated on the server as a single field.

<div class="partfix">
<textarea readonly="readonly" cols="50" rows="2">This part of the textarea content is fixed and cannot be changed</textarea><br/>
<textarea class="var" cols="50" rows="10">but the rest of the textarea content can be changed to whatever you want.</textarea>

To make the two textareas look like one we simply need to position the second textarea so that it buts up to the bottom of the first textarea. We could then turn off the bottom border of the first textarea and the top border of the second textarea so that it looks like it is a simple continuation of the first textarea except that hiding any of the borders turns them all off in Opera. To resolve this we'll hide all the borders and use a div around both textareas to supply a replacement border. We'll apply overflow hidden to get rid of the scrollbars in Internet Explorer as that acts as a giveaway that there are two separate areas, we just need to make sure that the area is big enough for the amount of content we will allow to be entered. As some browsers allow textareas to be resized and resizing one of the textareas without resizing the other will stop them looking like a single textarea we also need to turn this option off.

After applying all of these we end up with CSS that looks something like this:

.partfix {border:2px #ccc inset;width:20em;padding:0;margin:5px;}
.partfix textarea {resize:none;overflow:hidden; border:none;width:22em;margin:0}
.var {margin-top : -2px;}

The only clue that it isn't a single field is where the browser displays an outline around the field that has the focus and then either the fixed or updatable part has an outline while the other part does not.

So here's what our partly readonly textarea looks like inside a form and fieldset.

Textarea with Fixed Text Portion

If you compare this textarea to that in the comment form below you will see that they don't look quite the same but then the default textarea appearance varies slightly between browsers and this was the closest I could get that looks reasonably close in Internet Explorer, Firefox, Google Chrome and Opera. The textarea even maintains its integrity where only the text in the page is zoomed in or out several times.

All that we need to remember is that although it looks like one textarea it is actually two and so if we add names to the fields and have it submitted to the server we'll need to concatenate the content of the two fields into one before processing it. Still that is far better than relying on JavaScript to undo changes to the part of the text that is supposed to be fixed.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow