textarea里面的着色线

有没有什么办法让textarea显示线的颜色？我试图实现的是每隔一行着色一行，即白色，灰色，白色，灰色，白色，灰色......以提高可读性。用户应该写很多东西，比如“输入名字，每一行都是新行”。textarea里面的着色线

我确实使用jQuery，所以如果他们提出了一些简单的解决方案，这将是完美的。

2009-12-23 Sejanus

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

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

也许另一种解决方案是做一些类似于SO的操作 - 在文本框中输入文本，然后在文本框旁边或下方显示格式良好的版本。你会使用jquery实时解析文本并显示斑马条纹。

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

随着更多的工作，甚至可以让斑马条纹逻辑足够聪明，以检测文本行是否被包裹，以便斑马条纹可以是2或更高的线条。

可能工作。祝你好运！

来源

2009-12-23 08:54:17 Tauren

完成此操作的一种方法是在textarea中使用背景。

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

话虽这么说，你必须要玩的瓷砖和行高得到它恰到好处，但它应该是能够做到你无需使用找什么的脚本。

来源

2009-12-23 08:40:47

记住用户可以覆盖最小字体大小，如果该设置计算textareas它可能会破坏您的解决方案。 – 2009-12-23 08:47:42

好点。不知道是否有解决方案是完全可以证明的。看到其他人提出的答案会很有趣。 – 2009-12-23 09:00:55

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

来源

2009-12-23 08:45:34

textarea里面的着色线

回答

相关问题