文本区域内的线条着色

Question

有没有办法让textarea显示彩色线条？我想要实现的是每隔一行都着色，即白色，灰色，白色，灰色，白色，灰色......以获得更好的可读性。用户应该写很多东西，例如“输入名称，每个名称从新行开始”。

无论如何，我确实使用 jQuery，所以如果他们为此制定一些更简单的解决方案，那就完美了。

Answer 1

您正在寻找的称为斑马条纹，也许这会对谷歌搜索有所帮助。但是，我认为目前没有办法对文本区域内的文本执行此操作（除了使用背景图像黑客之外）。

CSS3 有很多强大的功能，例如 nth-child psuedo 类。可能有一种方法可以使用它来做到这一点，但同样，它可能无法在文本区域内做到这一点。

也许另一种解决方案是像SO那样做——你在文本区域中输入文本，然后在它旁边或下面显示一个格式良好的版本。您可以使用 jquery 实时解析文本并将其显示为斑马条纹。

编辑：我有另一个想法，可能有效，但需要一些实验。可能有一种方法使用 jquery 来获取文本区域中每行文本的绝对位置。我认为你至少可以得到文本区域左上角的绝对位置，得到文本的行高，乘以向下的行数（文本中的换行符数量），稍微测试和调整，然后您应该能够获取文本区域中每一行的位置。然后，使用 jquery 在每行文本的文本区域后面绘制一个彩色 div，该 div 与文本区域一样宽，与文本行一样高。文本区域也应该是透明的。

再做一点工作，您甚至可以让斑马条纹逻辑足够智能来检测文本行是否换行，以便斑马条纹可以有 2 行或更多行高。

可能有用。祝你好运！

Answer 2

实现此目的的一种方法是在文本区域中使用背景。

<style type="text/css"> 
  textarea { background-image: url(bg.png); }
</style>

话虽如此，您必须调整平铺和行高才能使其恰到好处，但它应该能够在不使用脚本的情况下完成您正在寻找的内容。

Answer 3

如果您想让实际文本具有不同的颜色，则无法使用纯

<textarea>

来做到这一点。您可以使用富文本编辑器，例如 TinyMCE，但在我看来，这太过分了。

Answer 4

这个答案可能有用： stackoverflow.com/questions/9468153