Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.08.2011, 11:36
Новичок на форуме
Отправить личное сообщение для fr0st1k Посмотреть профиль Найти все сообщения от fr0st1k
 
Регистрация: 25.08.2011
Сообщений: 7

Подчёркивание слов и обработка событий в textarea
Здравствуйте. пишу контрол Spell Check на asp.net. Необходимо, чтобы в теге textarea можно было неправильно написанные слова подчёркивать как в ворде волнистой линией и ставить обработчик правой кнопки мыши на это слово. Поскажите, пожалуйста, как это можно реализовать. Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2011, 12:57
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

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

В Вашем случае я могу предложить 2 варианта:
— Использовать фрейм с contentEditable. Тогда будут обширные возможности по настройке внешнего вида текста, но и проблем немало.
— Сделать фон у textarea прозрачным, а под неё положить другой элемент, который уже декорировать. Например, в случае моноширинного шрифта можно подложить снизу div с таким же шрифтом и располагать span'ы с пробелами, раскрашивая их.
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2011, 14:39
Новичок на форуме
Отправить личное сообщение для fr0st1k Посмотреть профиль Найти все сообщения от fr0st1k
 
Регистрация: 25.08.2011
Сообщений: 7

В случае 2го варианта, в первой строке textarea всё идеально работает, но если перевести на новую строку, то текст в диве опускается ниже чем в textarea... Это можно как нибудь исправить ?
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2011, 14:45
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

line-height настраивать. Или использовать display:inline-block и указывать height
Ответить с цитированием
  #5 (permalink)  
Старый 25.08.2011, 15:23
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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

Ещё не забыть синхронизировать скролы. С этим почти везде нормально. В IE8 и младше событие onscroll работает при отсутствии doctype или при его наличии в режиме эмуляции IE7. В Опере onscroll у textarea не работает вообще, там придётся проверять его по таймауту.
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2011, 15:25
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Ещё между двумя textarea нужно проложить прозрачный div с фоном (background: #FFF; opacity: 0), чтобы IE c ума не сходил.
Ответить с цитированием
  #7 (permalink)  
Старый 25.08.2011, 15:48
Новичок на форуме
Отправить личное сообщение для fr0st1k Посмотреть профиль Найти все сообщения от fr0st1k
 
Регистрация: 25.08.2011
Сообщений: 7

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

Kolyaj, а как в этом случае регировать на события ?
Ответить с цитированием
  #8 (permalink)  
Старый 25.08.2011, 15:54
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

С событиями сложнее. В моём случае нужна только правая кнопка мыши для выбора альтернативного варианта. Тут работает предположение, что куда кликнули, туда встал текстовый курсор, а дальше работаем с выделениями. Но Оперу победить пока не удалось.
Ответить с цитированием
  #9 (permalink)  
Старый 26.08.2011, 10:44
Новичок на форуме
Отправить личное сообщение для fr0st1k Посмотреть профиль Найти все сообщения от fr0st1k
 
Регистрация: 25.08.2011
Сообщений: 7

Проблему решил использованием div'a с contentEditable="true" и использованием span с border-bottom для подчёркивания неправильных слов и ставя нужный обработчик на mousedown. Ещё div перед этим настраивал чтоб выглядел как textarea.
Ответить с цитированием
  #10 (permalink)  
Старый 26.08.2011, 10:51
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка событий на динамически созданных объектах Alexey_R jQuery 28 15.02.2017 15:28
Обработка событий Shtorm ExtJS 4 30.07.2011 22:56
JQuery отложенная обработка событий hover DemonWather jQuery 2 09.03.2011 09:01
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31
Обработка событий клавиатуры MaxPayne Events/DOM/Window 26 01.05.2009 10:37