textarea内的着色线

Question

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

我确实使用jQuery，所以如果他们为此做了一些更简单的解决方案，那将是完美的。

Answer 1

你正在寻找的是斑马条纹，也许这将有助于一些谷歌搜索。但是，我认为目前没有办法在textarea中进行文本处理（除了使用背景图像黑客）。

CSS3有许多强大的功能，例如nth-child伪类。可能有一种方法可以使用它，但同样，它可能无法在文本区域内执行此操作。

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

编辑：我有另一个想法可能工作，但会进行一些实验。可能有一种方法使用jquery来获取文本区域中每行文本的绝对位置。我认为你至少可以获得textarea左上角的绝对位置，得到文本的行高，乘以行数（文本中的换行数），测试和调整一点，以及你应该能够获得文本区域中每一行的位置。然后，使用jquery在文本区域后面为每行文本绘制一个彩色div，其宽度与textarea一样宽，并且与文本行一样高。 textarea也应该是透明的。

通过更多的工作，你甚至可以让斑马条纹逻辑足够聪明，以检测文本行是否已经包裹，这样斑马条纹可以是2行或更多行。

可能会工作。祝你好运！

Answer 2

实现这一目标的一种方法是在textarea中使用背景。

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

话虽这么说，你必须要使用平铺和线高才能使它恰到好处，但它应该能够在不使用脚本的情况下完成你正在寻找的东西。 / p>

Answer 3

如果您想使实际文本的颜色不同，则无法使用纯<textarea>进行此操作。你可以使用像TinyMCE这样的富文本编辑器，但在我看来这太过分了。