Have Geek Brain

Limiting TextArea characters with TextArea background as realtime counter

I am considering a solution where when entering text in the TextArea, it should notify the user how many characters are left to enter. For example, you can only enter 200 or whatever. It's easy to do, but I want the spinner to appear in the background of the TextArea instead of in its own place.

I know I can change the background image of the TextArea, but how can I display text as the background of a textarea that has disappeared or has an opacity of 0.4 / 0.5. One solution is to create a lot of images and then change the images as the user enters characters. I don't think I want to go that route as it will force me to create 200 images.

+1


a source to share


2 answers


you could wrap it in a div and then make the textarea transparent and then put the text in a div behind it. you need the textarea to be fully positioned within the div.

this will 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'll have to change the color of the div text and margins and stuff

+3


a source


Have you tried using jQuery for this? Here is a post on how to make (watermark) just what you are looking for using javascript and css.



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

0


a source






More articles:


All Articles