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

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

Чулан
Мой друг 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
Теги:javascriptjqueryнавигация стрелками
Хабы: Чулан
Всего голосов 11: ↑7 и ↓4 +3
Просмотры719

Похожие публикации

Разработчик frontend JS / jQuery / Vue.js
до 150 000 ₽Хостинг-технологииМожно удаленно
Fullstack JavaScript developer
от 5 500 до 6 500 $BrightdataМожно удаленно
Frontend разработчик (JS, JQuery, React)
от 1 300 до 1 800 $InsightWhaleМожно удаленно
PHP-программист
от 100 000 до 180 000 ₽БИЗНЕС OnlineКазань
JavaScript - разработчик
до 100 000 ₽Studio 256Можно удаленно

Лучшие публикации за сутки