VPF::Перебор input-ов tab-ом. Проблема фокуса

Mindstorm

Дата 10.2.2011, 11:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 9.7.2009

Репутация: нет
Всего: нет

Есть генерируемая на сервере таблица. Поля таблицы представлены текстом между <div></div>. По событию onclick на ячейке таблицы текст становиться содержимым <input type=text>, к. появляется в ячейке таблицы на месте текста. По событию onblur для этого input его содержимое обратно переходит в текст.
Задача: реализовать возможность перебора с помощью tab. Т.е. единовременно у меня одна ячейка представлена input, остальные текстом, по нажатию tab я перехожу в следующую ячейку, она становиться input, а предыдущая текстом. Т.е. все то, что уже работает, но без мышкокликанья.
Я накорябал вот такой обработчик:

Код


function tabit(){
    $(document).bind('keypress', function(event){
        if(event.keyCode!=9) //tab
            return;
        //тут я получаю этот самый следующий input: next;
        //здесь я пробовал два варианта: непосредственный вызов функции преобразования между input и простым текстом
                editBox("text_to_input",next.attr("name"));
        //или через onclick, что в общем тоже самое
                next.click();
    });
}

в любом из этих вариантов в режиме debug (firebug) видно, что нужная ячейка преобразуется, но потом по непонятной мне причине вызывается обработчик onblur для этого элемента и ячейка обратно переходит в текст.
Замечание: в функции editBox для input вызывается .focus().

Пожалуйста, подскажите. Возможно я неправильно понимаю работу события focus. Заранее спасибо smile

ksnk

Дата 10.2.2011, 11:17 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(Mindstorm @ 10.2.2011, 11:04

)

Возможно я неправильно понимаю работу события focus.

Вероятно, неправильно понимается механизм обработки событий в JavaScript.
После вызова обработчика продолжается вызов всех остальных навешенных на элемент обработчиков, включая и переход на другой элемент по табу.
Чтобы его отменить, в некоторых случаях достаточно вернуть false в качестве результата, в некоторых нужно сделать еще stopImmediatePropagation

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Mindstorm

Дата 10.2.2011, 12:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 9.7.2009

Репутация: нет
Всего: нет

Большое спасибо за напоминание - про то, что event идет дальше по дереву, я действительно забыл, но ни один из предложенных вариантов не помог - событие onblur все равно вызывается. И я, честно говоря, все еще не пойму почему. Дело в том, что событие onblur срабатывает для того же элемента, на к. только что установил фокус (а не на предыдущем - я так понял из слов

Цитата(ksnk)

включая и переход на другой элемент по табу.

) Не понятно, почему это событие вообще вызывается smile

Это сообщение отредактировал(а) Mindstorm - 10.2.2011, 12:11

ksnk

Дата 10.2.2011, 12:47 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Можно выкинуть эти функции

Код


                editBox("text_to_input",next.attr("name"));
        //или через onclick, что в общем тоже самое
                next.click();

, заменить их

Код


event.stopImmediatePropagation()ж
return false;

и убедиться, что onblur перестал вызываться. Потом вставить функции и смотреть как оно пойдет...
Процесс называется отладка smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Mindstorm

Дата 10.2.2011, 13:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 9.7.2009

Репутация: нет
Всего: нет

Если убрать:

Код


                editBox("text_to_input",next.attr("name"));
        //или через onclick, что в общем тоже самое
                next.click();

то onblur и без

Код


event.stopImmediatePropagation()ж
return false;

не срабатывает.
Он также не срабатывает, если просто закомментить input.focus() в функции editBox. Но мне не интересно, если я нажал tab, а у меня курсора в input нет)

Добавлено через 12 минут и 1 секунду
Проблема решена! По совету одного человека заменил keypress на keyup и вуаля smile

ksnk, спасибо за участие, информация все равно была полезной.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »