Окраска линий внутри текстовой области

Question

Есть ли способ заставить текстовые поля отображать цвета? Я пытаюсь добиться того, чтобы каждая вторая строка была цветной, то есть белой, серой, белой, серой, белой, серой ... для лучшей читаемости. Предполагается, что пользователи пишут много разных вещей, например, «введите имена, каждое из новой строки».

Я все равно использую jQuery, так что если бы они сделали более простое решение для этого, это было бы идеально.

Answer 1

То, что вы ищете, называется чередование зебр, может быть, это поможет с поиском в Google. Тем не менее, я не думаю, что есть способ сделать это в настоящее время для текста в текстовой области (кроме использования взлома фонового изображения).

CSS3 имеет множество мощных функций, таких как класс nth-child psuedo. Возможно, есть способ сделать это с помощью этого, но, опять же, у него, вероятно, нет способа сделать это в текстовой области.

Возможно, другим решением было бы сделать что-то вроде SO - где вы вводите текст в текстовую область, а затем рядом с ней или под ней отображается красиво отформатированная версия. Вы будете использовать jquery для анализа текста в режиме реального времени и отображения его в полоску зебры.

Редактировать: У меня была другая идея, что может работать, но потребует некоторых экспериментов. Вероятно, есть способ использовать jquery для получения абсолютной позиции каждой строки текста в текстовой области. Я думаю, что вы могли бы по крайней мере получить абсолютную позицию верхнего левого угла текстовой области, получить высоту строки текста, умножить на количество строк вниз (количество разрывов строк в тексте), немного протестировать и настроить, и Вы должны быть в состоянии получить положение каждой строки в текстовой области. Затем используйте jquery, чтобы нарисовать цветной div за текстовой областью для каждой строки текста, которая равна ширине текстовой области и равна высоте строки текста. Текстовая область также должна быть прозрачной.

Приложив немного больше работы, вы, вероятно, даже сможете заставить логику чередования зебр быть достаточно умной, чтобы определить, обернута ли строка текста, так что полоса зебры может иметь высоту 2 или более строк.

Может работать. Удачи!

Answer 2

Один из способов сделать это - просто использовать фон в текстовой области.

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

При этом вам, возможно, придется поэкспериментировать с плиткой и высотой строки, чтобы все было правильно, но она должна быть в состоянии выполнить то, что вы ищете, без использования сценариев.

Answer 3

Если вы хотите, чтобы текст был разноцветным, нет способа сделать это с использованием чистого <textarea>. Вы можете использовать расширенный текстовый редактор, такой как TinyMCE , но, на мой взгляд, это будет слишком излишним.