Работа с частью текста в тегах input, textarea. Возможно ли?

Question

[Александр Князев]

Передо мной стоит задача создания расширения для Google Chrome, предлагающего исправить ошибки в некоторых словах, введенных пользователем на сайте.
Нужно, чтобы при вводе определенные слова подчеркивались (или выделялись, неважно). Для решения этой задачи существуют некоторые библиотеки, как, например, jQuery highlightTextarea .
Проблема в том, что эти библиотеки позволяют лишь выделять часть текста каким-либо цветом. Но мне также нужно еще иметь событие наведения на выделенном слове (по этому событию должен вываливаться список слов для возможной замены выделенного). Возможно ли это?

Comments

[Wheelie]

Ну они же не магическим образом подсвечивают. В вашем примере создается highlightTextarea , где тегом mark подсвечиваются слова. Вот на него и вешай все, что душе угодно. Если я конечно правильно понял суть проблемы.

[Александр Князев]

Wheelie: highlightTextarea находится "за" тегом Input, и , соответственно, я не могу повесить на него событие, оно просто не считывается. Пробовал уже

Answer 1

[IceJOKER]

Как вариант отслеживать движение курсора и как только он войдет в пределы одного из закрашенных элементов проделать дальнейшие дела

Comments

[Александр Князев]

Дело в том, что этот закрашенный элемент находится "за" тегом input
Если вешать событие вроде mouseover, то оно не срабатывает, ведь мышка наведена на input, а не на элемент за ним

[IceJOKER]

Александр Князев: я переходил по ссылке и проверил, поэтому предложил вам отслеживать движение курсора, его координаты. А еще лучше переделать плагин под свои нужды.

[Александр Князев]

IceJOKER: А, я сначала не понял, что вы про координаты. Ну, в принципе, смысл ясен.
А вот плагин под свои нужды - это я, к сожалению, при моем уровне, не осилю(((.

Answer 2

[OVK2015]

В textarea нельзя рендерить HTML.
Можно вот так выкрутиться:

<div class="textarea" contenteditable="true" spellcheck="true">Тестовая строка</div>

$('.textarea').html(
    '<span class="mouseAnchor">' + $('.textarea').html() + '</span>'
  );
  $('.mouseAnchor').bind('click', function(event){alert('На мне щелкнули');});