TextArea Limiteur de caractères avec l'arrière-plan de TextArea en tant que compteur en direct

Question

Je suis à la recherche d'une solution où lorsque vous tapez du texte dans le TextArea, il devrait informer l'utilisateur du nombre de caractères qu'il reste à entrer. Comme vous ne pouvez entrer que 200 ou quelque chose. C'est facile à faire mais je veux que le compteur soit affiché en arrière-plan de TextArea au lieu d'un endroit séparé. Je sais que je peux changer l'image d'arrière-plan de TextArea mais comment puis-je afficher le texte comme fond de la zone de texte qui est fanée ou qui a une opacité de 0,4/0,5. Une solution consiste à faire beaucoup d'images puis à changer les images lorsque l'utilisateur tape les caractères. Je ne pense pas que je veuille aller dans cette direction car cela me forcera à créer 200 images.

Answer 1

pouvez-vous l'envelopper dans un div puis rendre le textarea transparent, puis placez le texte dans le div derrière lui. vous devez avoir le textarea absolument positionné dans le div.

cela fonctionnerait aussi

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

vous auriez à modifier la couleur du texte de la div et des marges et d'autres choses.

Answer 2

Avez-vous essayé d'utiliser jQuery pour cela? Voici un article sur comment faire (tatouage) ce que vous cherchez en utilisant javascript et css.

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