[thelist] Limiting length of textarea field

[Anthony Baratta]

ben morrison wrote:
  > Could you show us an example? My first thoughts would be to change the
> style of the textarea in the print CSS.
> 
> 	<style type="text/css" media="print">
> 		textarea {
> 			overflow:visible;
> 		}
> 	</style>

I'm pretty sure I've tried that before and overflow doesn't work with a 
TextArea. Hence the flip and switch between a hidden div and the textArea.

Here's what I sent FayeC directly last night:

I just did this for a project so I know that it works more than in 
theory, but I don't have code to share because it's for an intranet.

What I can do is outline what I did:

First off CSS allows you do define the media to use the style sheet:

http://www.w3.org/TR/REC-CSS2/media.html

<LINK rel="stylesheet" type="text/css"
      media="all" href="foo.css">

<LINK rel="stylesheet" type="text/css"
      media="print" href="foo-print.css">

In the default CSS make the textarea "display: inline;" and the 
replacement DIV,  "display: none;"

Then in the print media type CSS you make the textarea "display: none;" 
and the replacement DIV,  "display: block;" or inline, whatever works 
best for your layout.

In your HTML it might look like this:

<div id="TextAreaContainer">
     <textarea id="formTextArea" name="formTextArea"
         class="screenOnly">User entered text</textarea>
     <div id="divTextArea" class="printOnly"></div>
</div>

Your CSS might look like this:

foo.css

.screenOnly { display: inline;}
.printOnly { display: none;}


foo-print.css

.screenOnly { display: none;}
.printOnly { display: inline;}

You only need to replicate the CSS styles between screen and print that 
are going to change if the deault CSS is set to ALL - the print version 
of the CSS file does not have to replicate the WHOLE default CSS file. 
If it's second on the list it will "over-ride" the duplicate styles.

And you can clone the text from the text area to the div one of two 
ways. Either via a "print button" that copies the innerText of the Text 
Area to the div, or on each keypress copy the text over.

The second way allows you to forego the print button since everytime 
they press a key in the Text Area, the text is copied over. Obviously if 
they have JS turned off, the copy feature will not work - but that 
doesn't happen that often anymore. And you can default the text in the 
replacement DIV with a warning message.

Hope that helps.