Подчёркивание слов и обработка событий в textarea

[fr0st1k]

Здравствуйте. пишу контрол Spell Check на asp.net. Необходимо, чтобы в теге textarea можно было неправильно написанные слова подчёркивать как в ворде волнистой линией и ставить обработчик правой кнопки мыши на это слово. Поскажите, пожалуйста, как это можно реализовать. Заранее благодарен.

[B@rmaley.e><e]

В самой textarea нельзя как-либо выделять слова.

В Вашем случае я могу предложить 2 варианта:
— Использовать фрейм с contentEditable. Тогда будут обширные возможности по настройке внешнего вида текста, но и проблем немало.
— Сделать фон у textarea прозрачным, а под неё положить другой элемент, который уже декорировать. Например, в случае моноширинного шрифта можно подложить снизу div с таким же шрифтом и располагать span'ы с пробелами, раскрашивая их.

[fr0st1k]

В случае 2го варианта, в первой строке textarea всё идеально работает, но если перевести на новую строку, то текст в диве опускается ниже чем в textarea... Это можно как нибудь исправить ?

[B@rmaley.e><e]

line-height настраивать. Или использовать display:inline-block и указывать height

[Kolyaj]

Подкладывать нужно тоже textarea, у него особые правила переноса слов. Подчёркивать волнистой линией соответственно не получится, но можно выделять фоном. Для этого в нижний textarea пишем то же самое, что написано в верхнем, а проблемные слова заменять на последовательность из █.

Ещё не забыть синхронизировать скролы. С этим почти везде нормально. В IE8 и младше событие onscroll работает при отсутствии doctype или при его наличии в режиме эмуляции IE7. В Опере onscroll у textarea не работает вообще, там придётся проверять его по таймауту.

[Kolyaj]

Ещё между двумя textarea нужно проложить прозрачный div с фоном (background: #FFF; opacity: 0), чтобы IE c ума не сходил.

[fr0st1k]

Barmaley, спасибо, помогло. Но сейчас встаёт проблема обработки событий mousedown элементов span внутри diva, т.к. div находится под textarea, т.е. можно только печатать текст. У меня сейчас абсолютное позиционирование и diva и textarea в одном месте. Необходимо как то запихать div внутрь textarea, чтобы он мог реагировать на события и при этом ещё можно было печатать текст в textarea

Kolyaj, а как в этом случае регировать на события ?

[Kolyaj]

С событиями сложнее. В моём случае нужна только правая кнопка мыши для выбора альтернативного варианта. Тут работает предположение, что куда кликнули, туда встал текстовый курсор, а дальше работаем с выделениями. Но Оперу победить пока не удалось.

[fr0st1k]

Проблему решил использованием div'a с contentEditable="true" и использованием span с border-bottom для подчёркивания неправильных слов и ставя нужный обработчик на mousedown. Ещё div перед этим настраивал чтоб выглядел как textarea.

[Kolyaj]

Мы как раз хотим уйти от сontentEditable, ибо тяжёлая, капризная и не кроссбраузерная штука.