@diegocoder

Как подсветить строку в textarea?

Есть textarea. Есть его содержимое и номера строк слева. По нажатию на номер строки надо подсветить всю строку. Строки определяются не по переносам, а по высоте. В целом всё уже готово:
d0f3b96edff041a587f5e417c6929439.png
Проблема вот в чем: реализовано это через div который через position:absolute перекрывает поле ввода. А значит, что в этом месте вводить и редактировать текст не получится. Было бы проще, если бы надо было подсветить текст по переводам строки(\n) - тогда можно использовать кое-какой jquery плагин который подсвечивает текст в поле ввода от и до обозначенных символов. Но заказчик хочет именно так как на скриншоте, а в таком случае становится проблематично узнать, в каком месте какой по порядку символ находится, даже с моноширинным шрифтом.

Пробовал ловить события клика и другие события на элементе div и пробрасывать в textarea через new Event с последующим elem.dispatchEvent(event); - ноль реакции. Поле ввода ловит все события но ничего не происходит, курсор не устанавливается в текст.

Что делать? Может есть другой путь подсветки строки?

Свиду вопрос простой, но сижу уже пятый день над ним. За несколько лет опыта многое повидал и сделал но такую простую фишку реализовать не получается.
  • Вопрос задан
  • 479 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
z-index, и подсвечивайте снизу jsfiddle.net/jr0vhbdv

UPD: координаты для подсветки можно вычислять при помощи TextRange, но могут быть проблемы с кроссбраузерностью.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы