Как стать автором
Обновить

Навигация с помощью стрелочек, Javascript

Время на прочтение2 мин
Количество просмотров2.4K
Мой друг starfake попросил опубликовать его пост. Недавно он оставил один неосторожный комментарий, за что был жестоко наказан сообществом :) Если пост вам понравится или даже будет полезен, прошу поднять ему карму.

Когда-то давно, прочитав в Лебедевском техногретте пост про навигацию стрелочками решил сделать такую же на форуме одного своего (с другом) проекта.
Сказано — сделано. Навигация стрелочками заработала, чему я очень обрадовался, но спустя некоторое время выявился небольшой баг. Находясь на текстовом поле, редактируя запись, вместо перехода с Ctrl между словами получаешь переход на следующую или предыдущую страницу (и удаление записи). Меня пару раз отматерили, а скрипт убрали.
Недавно мне нечего было делать на работе и я решил переписать его, учитывая фокус на форме.

var focusStatus = null;
var focusedElement = null;

$(document).ready(function() {
$("textarea, input[type*='text'], input[type*='password']").focus(function() {
focusStatus = 1;
focusedElement = this.id;
$("#text").text("focusStatus = " + focusStatus + ", focusedElement = " + focusedElement + "\n"); // Для теста выводил текст в див
});
$("textarea, input[type*='text'], input[type*='password']").blur(function() {
focusStatus = null;
focusedElement = null;
$("#text").text("focusStatus = " + focusStatus + ", focusedElement = " + focusedElement + "\n"); // Для теста выводил текст в див
});
$(document).keydown(function(event) {
if (event.ctrlKey && !focusStatus) {
var link = null;
var href = null;
switch (event.keyCode? event.keyCode: event.which? event.which: null) {
case 0x25:
link = $("#prev").attr("href");
break;
case 0x27:
link = $("#next").attr("href");
break;
}
if (link) document.location = link;
}
});
});


Для ускорение написал с использованием jQuery. К сожалению, jQuery знаю не очень хорошо, поэтому буду благодарен за комментарии и предложения по улучшению (наверняка можно сделать красивей).
От оригинальной Лебедевской версии отличается только:
наличием переменной focusStatus (наличие которой проверяем при нажатии Ctrl), focusedElement (остался на всякий случай).
Оказывается к большому сожалению, в JS нельзя (? вроде бы) узнать, на чем стоит focus. Поэтому добавились 2 функции focus() и blur() на важных на мой взгляд элементах — текстовом поле, и инпутах (текст и пароль). На фокусе ставится значение переменной 1, на blur() null.
Навигация стрелочками осуществляется только когда переменной focusStatus нет.

На Хабре, кстати тоже можно ввести такую штуку, потому что навигация работает, когда стоишь на поле поиска.

Upd. К сожалению, тут в коде отступы слетают, поэтому положил код еще тут.
Upd#2 Реализация и плагин отmaxic, используемая тут.
Upd#3 Вариант без jQuery от seraph
Теги:
Хабы:
+3
Комментарии13

Публикации

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн