#javascript #html #css #textarea
#javascript #HTML #css #текстовая область
Вопрос:
Есть ли простой способ заставить HTML <textarea> чередовать цвета строк для улучшения редактирования?
Я не возражаю, если решение является чистым CSS или требует JavaScript.
Комментарии:
1. Не текстовая область, но, возможно, посмотрите на атрибут ContentEditable HTML5: html5demos.com/contenteditable
Ответ №1:
textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
Нашел это в codepen. Работает для меня.
Комментарии:
1. добавьте «background-attachment: local;», чтобы текст текстовой области прокручивался вместе с фоном. ЗАМЕЧАТЕЛЬНО!!
2. Кроме того, если вы хотите изменить размер высоты строки, вам также необходимо пропорционально изменить размер фона. Кроме того, переместите текст текстовой области вверх / вниз с помощью верхнего отступа. Это сложно настроить, но это возможно!
Ответ №2:
Если я правильно понимаю, вы хотите, чтобы цвета чередовались В текстовой области (как в каждой строке)?
Я бы предложил самый простой способ — использовать фоновое изображение в вашей текстовой области и иметь строки альтернативных цветов той же высоты, что и размер шрифта / высота строки, чтобы создать иллюзию альтернативных строк, а затем просто повторить фоновое изображение.
Дополнительное решение
Однако, похоже, что при использовании этого метода фон не прокручивается вместе с каждой строкой.
Лучший метод, который я могу придумать, — это использовать плагин jQuery под названием ‘autoResize’ Джеймса Падолси. Что это делает, так это удаляет полосы прокрутки, и когда ваш текст приближается к нижней части textarea , textarea высота соответственно увеличивается.
Теперь это может вызвать проблемы, поскольку у вас потенциально могут быть ОЧЕНЬ длинные текстовые области в зависимости от того, сколько текста пишет пользователь, но я создал исправление для этого.
Что мы можем сделать, это обернуть textarea в a div и установить overflow-y (по вертикали) scroll и overflow-x (по горизонтали) hidden . Теперь это дает нам «поддельную» полосу прокрутки на нашем textarea , создавая иллюзию, что она прокручивается, поэтому наш фон теперь выглядит так, как будто он прокручивается вверх и вниз вместе с текстом.
Вам нужно будет соответствующим образом настроить ширину / высоту / поля / границы / отступы и т.д. и, возможно, проверить кроссбраузерную совместимость, но это должно помочь направить вас на правильный путь и заставить вас двигаться дальше.
Вот ссылка на пример, который я создал, используя описанный выше метод:
Комментарии:
1. Спасибо, действительно классное решение. Я отмечу это как лучшее, если кто-нибудь не предложит что-то без использования изображения.
2. Это будет работать до тех пор, пока ваш вариант высоты строки / шрифта соответствует высоте фонового изображения, окрашенного в «строки»
3. это звучит как хорошая идея.. Я не думаю, что есть другой простой способ сделать это в текстовой области
4. @HelloJoe это не сработает. Я пробовал. представьте, что ваша высота равна 14 пикселей. изображение 28 пикселей (красный верх оранжевый низ) проблема в том, что вы предполагаете, что ваш текст всегда находится в верхней части текстовой области, чего может и не быть. текст может быть частично обрезан из-за прокрутки.
5. Я понимаю, что вы имеете в виду, я могу помочь попытаться найти альтернативное решение, если вы уже не нашли решение самостоятельно?
Ответ №3:
CSS nth child теперь поддерживает синтаксис. Ознакомьтесь с документами MDN для примера изменения цвета фона только для любого другого элемента списка внутри неупорядоченного списка:
HTML:
<p>NBA players with most championships:</p>
<ul>
<li>Bill Russell</li>
<li>Sam Jones</li>
<li>Tom Heinsohn</li>
<li>K. C. Jones</li>
<li>Satch Sanders</li>
<li>John Havlicek</li>
<li>Jim Loscutoff</li>
<li>Frank Ramsey</li>
<li>Robert Horry</li>
</ul>
CSS:
li:nth-child(even) {
background-color: lightyellow;
}
Результат:
Источник: