Тег Span внутри contentEditable div нуждается в событии нажатия клавиши - PullRequest
Новая
       29

Тег Span внутри contentEditable div нуждается в событии нажатия клавиши

0 голосов
/ 25 августа 2010

У меня есть следующий div в моем HTML-коде: 

<div id="expanderInput" tabIndex="1" contentEditable></div>

Я использую div contentEditable как простой кросс-браузерный метод создания автоматически расширяющегося текстового поля. Я также делаю проверку ввода того, что пользователь вводит в этот div. Предполагается, что это список адресов электронной почты, разделенных запятыми. Когда пользователь пытается предоставить неверную информацию, мой JavaScript разбивает входные данные и выделяет красным цветом все неправильные фрагменты. 

//split the address into the comma-separated chunks
var chunks = splitForward(forwardsTo);

//Grab each bad chunk one at a time and stick it in a span with a red-colored text
for(var i = 0; i < invalids.length; i++)
{
    var current = chunks[invalids[i]];
    current = '<span class="highlighted">' + current + '</span>';
    chunks[invalids[i]] = current;
}
$("#expanderInput").html(chunks.join());
initHighlighted();

Массив «инвалиды» ​​содержит индексы всех плохих блоков. Все до этого момента работает отлично. Но как только пользователь начинает печатать внутри красного текста, мне нужно, чтобы красный исчез, но только в этом диапазоне. Например, если есть два поврежденных блока, каждый из которых выделен красным, и пользователь начинает исправлять один, другой должен остаться красным.

Я пытался подключить прослушиватель событий к диапазонам: 

initHighlighted = function()
{
    $(".highlighted").keypress(function()
    {
        alert("It works!");
    });
};

Но событие никогда не происходит, даже когда пользователь редактирует текст красным цветом. Используя инструменты разработчика браузера, я вижу, что есть обработчик событий, он просто никогда не отключается. Это атрибут contentEditable в div, вызывающий промежуток от получения события? Я также попытался сделать сами промежутки contentEditable, но поведение остается тем же.

1 Ответ

1 голос
/ 25 августа 2010

Если я не ошибаюсь, это должно решить вашу проблему: 

initHighlighted = function()
{
    $(".highlighted").live("keypress",function()
    {
        alert("It works!");
    });
};

Поскольку ваши диапазоны добавляются после начальной загрузки DOM, прослушиватели событий нажатия клавиш не были присоединены, так как ничего не былоприкрепить их к.Jquery live решает эту проблему за вас, присоединяя эти слушатели, в данном случае, к чему-либо с выделенным классом, независимо от того, добавляются ли они в DOM.

Прочтите документацию на сайте Jquery, чтобыполучить гораздо лучшее объяснение, чем я мог бы вам дать: http://api.jquery.com/live/

РЕДАКТИРОВАТЬ: Мои извинения за неправильное чтение вашего вопроса и понимание того, что вы подключали слушателя нажатия клавиш после того, как были добавлены «выделенные» промежутки.1010 *

Вы уже читали это:

События клавиатуры для дочерних элементов в contenteditable div?

...