javascript - 以 TextArea 背景作为实时计数器的 TextArea 字符限制器

Question

我正在研究一种解决方案，当您在 TextArea 中键入文本时，它应该通知用户还剩下多少字符需要输入。比如你只能输入200之类的。这很容易制作，但我希望计数器显示在 TextArea 的背景中而不是单独的地方。

我知道我可以更改 TextArea 的背景图像，但如何将文本显示为褪色或不透明度为 0.4/0.5 的文本区域的背景。一种解决方案是制作大量图像，然后在用户键入字符时更改图像。我不认为我想走那条路，因为它会迫使我创建 200 张图像。

Answer 1

你能不能把它包在一个 div 里，然后让 textarea 透明，然后把文本放在它后面的 div 里。您需要将文本区域绝对定位在 div 中。

这也行

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

你必须修改 div 的文本颜色和边距等等。