TextArea Character Limiter with Background of TextArea as a Live Counter

Question

I am looking into a solution where when you type text into the TextArea it should notify the user how many characters are left to enter. Like you can only enter 200 or something. This is easy to make but I want that the counter will be displayed in the background of the TextArea instead of a separate place.

I know I can change the background image of the TextArea but how can I display Text as a background of the textarea which is faded or have opacity 0.4/0.5. One solution is to make a lot of images and then change the images as the user type the characters. I don't think I want to go that route since it will force me to create 200 images.

Answer 1

could you wrap it in a div then make the textarea transparent then put the text in the div behind it. you'd need to have the textarea absolutely positioned within the div.

this would work too

<div style="position:relative; width:500px; height:500px; ">
150
    <textarea style="position:absolute; background-color:transparent; top:0; left:0; width:500px; height:500px;"></textarea>
</div>

you'd have to modify the text color of the div and margins and stuff.

Answer 2

Have you tried using jQuery to do this? Here's a post on how to do (watermarking) just what you're looking for using javascript and css.

http://updatepanel.net/2009/04/17/jquery-watermark-plugin/