[thelist] Limiting length of textarea field

ben morrison morrison.ben at gmail.com
Fri Jan 5 09:39:05 CST 2007


On 1/5/07, Anthony Baratta <anthony at baratta.com> wrote:
> 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.
>

Yes there does seem to be a mozilla bug -
https://bugzilla.mozilla.org/show_bug.cgi?id=197934

> 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:

> 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.

I'm not very keen on this solution though and it's not very accessible.

If your relying on javascript then you may as well create the extra
div with javascript and hide the textarea as well.

Therefore fixing any CSS off/on JS off/on alternatives.

ben


-- 
Ben Morrison



More information about the thelist mailing list