textarea内的着色线 [英] Coloring lines inside textarea

问题描述

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

Is there any way to make textarea display lines in colors? What I am trying to achieve is every second line colored, i.e. white,grey,white,grey,white,grey... for better readability. Users are supposed to write in lots of stuff, as in "enter names, each one from new line".

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

I do use jQuery anyway so if they made some simpler solution for this it would be perfect.

推荐答案

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

What you are looking for is called Zebra striping, maybe that will help with some google searching. However, I don't think there is a way to currently do this to text within a textarea (besides using the background image hack).

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

CSS3 has a lot of powerful features such as the nth-child psuedo class. There might be a way to do it using that, but again, it probably has no way to do that within a text area.

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

Perhaps another solution would be to do something like SO does -- where you enter text into a textarea and then next to it or below it it shows a nicely formatted version. You would use jquery to parse the text in real time and display it zebra striped.

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

I had another idea that might work, but would take some experimenting. There is probably a way using jquery to get the absolute position of each line of text in the text area. I would think you could at least get the absolute position of the top left of the textarea, get the line height of the text, multiply by the number of rows down (number of linebreaks in the text), test and tweak a little, and you should be able to get the position of each line in the text area. Then, use jquery to draw a colored div behind the text area for each line of text that is as wide as the textarea and as tall as the line of text. The textarea should be transparent as well.

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

With a little more work, you can probably even have the zebra striping logic be smart enough to detect if the line of text has wrapped, so that zebra stripe can be 2 or more lines tall.

可能会工作。祝你好运！

Might work. Good luck!

这篇关于textarea内的着色线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！