Сайт о телевидении

Больше двадцати дней прошло с момента как я ничего не писал и не выкладывал, был немного занят, да и честно говоря решил отдохнуть. Ведь, как никак, отдых всегда нужен. Сегодня я начинаю одну тему, которая в дальнейшем поможет Вам создать свой чат личных сообщений, а также различных к нему приложений, в частности, настроек горячих клавиш . По сути, мы будем реализовывать с Вами личные сообщения, как во многих социальных сетях и лично я бы хотел остановиться на принципах такого чата, как в контакте. Ведь несомненно у него имеется не плохой функционал, но данную тематику мы будем поднимать постепенно, двигаясь от шага к шагу.

Что такое горячие клавиши?

Возможно, имеются люди, которые задаются этим вопросом, что же такое горячие клавиши ? Отвечу Вам просто, на обычном примере. Допустим, Вы печатаете текст в поле textarea , затем нажимаете клавишу Enter и при ее нажатии режим каретки переходит вниз, но вместо этого Вам нужно, чтобы письмо уже отправлялось. Для этого существует код каждой клавиши, которую можно вызвать запросом, отсюда и название - горячие клавиши . То есть, с помощью одной клавиши, Вы можете перепрограммировать сам запрос обращений к исходному элементу. Реализуется данный функционал с помощью языка веб программирования JavaScript .

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

Первый шаг. HTML. CSS.

Начинаем с первого шага и подключаем наш скрипт горячих клавиш dershortcut.js , а также не забываем про стили demo.css .

Теперь нам потребуется создать форму, в которой будет для примера, три поля - имя, фамилия и сообщение. Обработчика для данной формы я не делал, так как мы пока что, только знакомимся с применением горячих клавиш.

Имя Фамилия Сообщение

Заметьте, что сначала создается форма с обязательным именем form , тег атрибута fieldset тоже является обязательным, так как без него поля при нажатии на клавишу Enter не будет переключаться должным образом между собой, используя событие клавиатуры onKeyPress . У каждого поля, как видим имеется свое значение и функция. Для поля textarea также имеются события перехвата ввода с клавиатуры onKeyDown и onKeyUp , но с ними мы познакомимся позже, во втором шаге, где подробно расписан код JavaScript . Кстати, не забываем предать стили нашей форме, чтобы она корректно отображались.

#content{ padding: 50px; margin: 0 auto; width: 300px; } input, textarea{ width: 300px; border: 1px solid #000000; padding:10px; margin-bottom: 10px; } input{ border:none; background: none; color:#FFFFFF; } fieldset{ border: none; }

Второй шаг. JavaScript.

Переходим ко второму шагу и тут мы ознакомимся с принципом реализация JavaScript кода для назначения горячих клавиш. И так, для этого я создал специально четыре переменные, которые являются нашими часто применяемыми клавишами. Первая переменная enter в которой находится число 13. Так вот, данное число и является кодом данной клавиши при нажатии. Остальные тоже аналогично - shift , ctrl , alt и capslock . Перед этим нам необходимо прописать функцию KeyDown со значением event , которая будет относиться к полю textarea по событию onKeyDown .

Function keyDown(event){ Скрипт тут... } var enter = 13; var shift = 16; var ctrl = 17; var alt = 18;

Далее создаем переменную text и записываем в нее получение от поля textarea, какой-либо передачи данных при введении и отправке текста. В поле идентификатора text , также не забываем убрать лишние переносы строк с помощью функции replace .

Var text = document.getElementById("text").value; text = text.replace(/\s/g, "");

Далее не плохо было бы сделать наше поле, более похожим как в контакте, то есть при нажатии на клавишу enter , каретка не должна сдвигаться, так как переноса не должно быть на новую строку. Для этого нам потребуется следующая конструкция. Причем заметьте, что имеются и другие горячие клавиши кроме enter , поэтому скрипт должен содержать и их доступность тоже.

Event = event || window.event; if(event.keyCode != enter && event.keyCode != shift && event.keyCode != ctrl && event.keyCode != alt && event.keyCode != capslock) { return; } if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }

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

If(event.keyCode == enter && text.length > 0){ document.getElementById("button").click(); }

Теперь можем смело переходить к другим горячим клавишам, таким как alt , shift , ctrl и capslock . Для начала нам потребуется условие, которое будет утверждать значение нажатой клавиши capslock .

If(event.keyCode == 20){ capslock = true; }

Далее при нажатии клавиши ctrl мы добавляем в поле textarea теги , при нажатии alt добавляем тег переноса
, при сочетании нажатий двух клавиш shift и capslock мы добавляем текст "сайт - СКРИПТЫ ДЛЯ САЙТА! ".

Else if(event.keyCode == ctrl){ document.getElementById("text").value += ""; } else if(event.keyCode == alt){ document.getElementById("text").value += "
"; } else if(event.keyCode == shift && capslock){ document.getElementById("text").!"; }

Теперь перейдем к функции keyUp со значением event . Она нужна нам исключительно для отката действий или сброса при нажатии клавиш.

К примеру, теперь нам нужно отменить нажатую клавишу capslock для этого пропишем.

Function keyUp(event){ if(event.keyCode == capslock){ capslock = false; } }

И на последок, не плохо было бы сделать переключения между полями - имя, фамилия, сообщения через клавишу Enter . Делается это все через функцию KeyPress с двумя значениями event и fields . Первое общение значение KeyCode , а второе используется для конкретного поля. Уместно употребить тут событие focus , ведь с помощью него и скрипт переключается между элементами полей.

Function KeyPress(event,fields) { var keys = navigator.appName == "Netscape" ? event.which: event.keyCode; var enter = 13; if (keys == enter){ document.form.elements.focus(); return false } return true }

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

Function keyDown(event){ var enter = 13; var shift = 16; var ctrl = 17; var alt = 18; var text = document.getElementById("text").value; text = text.replace(/\s/g, ""); if(event.keyCode == 20){ capslock = true; } event = event || window.event; if(event.keyCode != enter && event.keyCode != shift && event.keyCode != ctrl && event.keyCode != alt && event.keyCode != capslock) { return; } if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } if(event.keyCode == enter && text.length > 0){ document.getElementById("button").click(); } else if(event.keyCode == ctrl){ document.getElementById("text").value += ""; } else if(event.keyCode == alt){ document.getElementById("text").value += "
"; } else if(event.keyCode == shift && capslock){ document.getElementById("text").!"; } } function keyUp(event){ if(event.keyCode == capslock){ capslock = false; } } function KeyPress(event,fields) { var keys = navigator.appName == "Netscape" ? event.which: event.keyCode; var enter = 13; if (keys == enter){ document.form.elements.focus(); return false } return true }

А на этом все, благодарю всех за внимание, прощаюсь не надолго. Всем удачи!

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

Конструктор сайтов "Нубекс"

В этом примере используется горячая клавиша n для перехода по ссылке.

Атрибут accesskey может применяться не только к ссылкам, но и к другим элементам (картинка, кнопка, текстовое поле, флажок и т.д.). Его действие - фокусировка на нужном элементе. А выполнение конкретного действия зависит от типа элемента. Например, для ссылки - это переход по ссылке, для флажка - проставление галочки, для кнопки - клик по кнопке.

Активация горячей клавиши происходит по-разному в разных браузерах:

• Google Chrome: Alt+Key;
• Firefox: Shift+Alt+Key;
• Opera: Shift+Esc+Key;
• Internet Explorer: Alt+Key;
• Safari: Alt+Key.

Горячие клавиши на сайте с помощью JS

Конечно, хотелось бы получить больше возможностей в навигации по сайту, переходу между элементами с помощью горячих клавиш. И если есть такая необходимость, лучше использовать JavaScript. Изобретать велосипед не нужно (как это любят делать многие неопытные разработчики), можно воспользоваться одним из готовых решений. Например, JS-Hotkeys . Использовать его очень просто:

$(document).bind("keydown", "ctrl+n", function(){ /* Код, который исполняется при нажатии горячих клавиш Ctrl+n */ });

Переход по ссылкам с помощью горячих клавиш - "Нубекс" $(document).bind("keydown", "ctrl+n", function(){document.getElementById("nubex").click();}); Конструктор сайтов "Нубекс"

– Игорь (Администратор)

Рано или поздно любой пользователь начинает использовать горячие клавиши в браузерах. И причина не в том, что браузеры так плохо устроены, что мышки не хватает или что сайты плохо сделаны. Сколько в том, что со временем пользователь начинает посещать все больше веб-страниц. Посмотрите сейчас на то количество вкладок, которое у вас открыто. Если 10 лет назад несколько страниц было достаточно любому, то сегодня их легко может быть больше 30. Стоить заменить, немаловажную роль сыграло увеличение скорости интернета. Потому что на модемах скорость исчислялась отнюдь не в мегабайтах.

Существует множество различных сочетаний клавиш, они же горячие клавиши, которые помогают выполнить различные операции намного быстрее. Большинство из нас, наверное, помнит лишь немногие. Но вот те комбинации, которые наиболее популярны. Все сочетания прекрасно работают в Internet Explorer 8+, Firefox 3.6+ и Chrome 5+.

Быстрая прокрутка веб-страницы горячими клавишами

Есть несколько способов для прокрутки вверх и вниз длинной веб-страницы.

Стрелки вверх и вниз -- Прокручивают страницу на одну строку вверх или вниз

Клавиши "Page UP" / "Page Down" -- Прокрутка нескольких строк за один раз

Клавиша "Home" -- Прокручивает к началу страницы

Клавиша "End" -- Прокручивает к низу страницы

Остановить загрузку сайта с помощью горячей клавиши

Иногда страница может очень долго загружаться из-за отсутствия ответа от сайта (от сервера, где расположен сайт) или ее размер очень большой. Так же бывает, что открываемая страница заражена вирусами , и вам бы очень хотелось остановить загрузку такой страницы. Или же, наконец, бывает так, что есть страницы, которые по каким-то причинам не стоит открывать. Например, на ряде сайтов есть такая коварная штука как "время последнего посещения". Иногда такая штука может привести к грустным и глупым ситуациям.

Какая бы у вас не была причина, на нее есть простая специальная клавиша "Esc". После ее нажатия браузер останавливает загрузку страницы.

Восстановить только что закрытую вкладку комбинацией клавиш

Порой очень обидно, когда вы случайно закрыли вкладку, а ссылки на страницу вы не знаете. Банально, не туда ткнули мышкой. Или, попросту, вначале решили, что не будете читать и закрыли вкладку. А потом передумали и захотели прочитать. Для этого случая тоже есть необходимая комбинация. Чтобы открыть обратно закрытую вкладку вам необходимо одновременно нажать следующую комбинацию клавиш Ctrl + Shift + T .

Действительно обновить страницу сочетанием клавиш

Надеюсь, ни для кого не секрет, что обычное нажатие клавиши F5 не всегда реально обновляет страницу. Происходит это от того, что браузеры и сайты используют кэш. Если не вдаваться в технические подробности, то кэш позволяет экономить время загрузки страницы, на которой вы находитесь. И если совсем коротко, то в кэше хранятся копии всех элементов страницы. В сегодняшнее время, когда файлы скриптов могут занимать мегабайты, без кэша очень сложно обойтись. Тем не менее, иногда именно из-за необновленного кэша возникают проблемы. В данном случае вам надо полностью обновить страницу. Ну, и есть более житейские причины для обновления страницы. Банально, вам сообщили, что информация на странице обновилась, а на экране все та же старая информация. И ждать, когда истечет время жизни кэша, не очень хочется.

Для таких ситуаций вам необходимо использовать одну из двух комбинаций клавиш: Ctrl + R или Ctrl + F5. Действуют они одинаково, единственное различие в том, что в случае "Ctrl + F5" кисть руки должна быть длиннее, потому как одной рукой очень сложно дотянуться.

Ведь иногда хочется, чтобы форма отправлялась по CTRL+Enter, а часто используемые пункты меню были доступны по какой-то своей хитрой комбинации клавиш.
А еще не хочется на эти мелкие удобства тратить время, ведь горячие клавиши - это далеко не для каждого. Хотя если к ним привыкнуть - отучиться просто невозможно.

Подключив файлик hotkeys.js, который будет описан ниже, появляется возможность задавать горячие клавиши любым ссылками и кнопкам отправки форм вот так:
удалить или

Дело в том, что описывать каждый раз обработчик на нажатие клавиши, когда появилось желание добавить на сайт горячих клавиш - не самый удобный вариант. Слишком много чести, для такой неглобальной задачи - потому то это и не очень распространено. Обычно решающим фактором оказывается банальная лень. А заказчики сами такого требовать не будут (пока, конечно, не прознают где-нибудь, что это типа модно). Поэтому я предлагаю вариант для ленивых - никаких обработчиков, кроме одного единственного. А горячая клавиша становится самодокументированной благодаря тексту из ссылки.

Вот эти строчки, содержимое файла hotkeys.js:
// ГОРЯЧИЕ КЛАВИШИ, файл hotkeys.js // Для работы требуется JQuery. Автор: Олег Йожик Дубров $(function(){ // Задаем псевдоними для каждой кнопки, создав специальный ассоциативный массив: var keyCodes = {D:68, E:69, F:70, M:77, N:78, O:79, U:85, Esc:27, "/":220, "0":48, "1":49, "2":50, "3":51, "4":52, "5":53, "6":54, "7":55, "8":56, "9":57, Left:37, Up:38, Right:39, Down:40, Enter:13, Ctrl:17, Alt:18, Space:32 // прошу простить, тут не все коды клавиш }; // заготовка всплыающей подсказки (оранжевый болончик над ссылками и инпутами) var prompt = $("-"); prompt.css("position", "absolute"); prompt.css("padding", "1px 3px"); prompt.css("font-size", "8px"); prompt.css("background-color", "orange"); prompt.css("color", "black"); prompt.css("opacity", "0.8"); // легкая полупрозрачность не повредит prompt.css("border", "1px solid black"); // скруглим её особым образом, оставив один угл острым: prompt.css("border-radius", "7px 7px 0px 7px"); prompt.css("-moz-border-radius", "7px 7px 0px 7px"); // показать подсказки к клавишам var showHotPrompts = function(){ if($(".hotprompt").length > 0) return ; // для каждого инпута или ссылки, с атрибутом hotkey $("a, input").each(function(a){ p = prompt.clone(); // клонируем заготовку, которую мы создали p.html($(this).attr("hotkey")); //помещаем в нее строку "Ctrl + .." p.insertAfter($(this)); //вставляем подсказку сразу после самой ссылки // располжим её так, чтобы острый уголок пришелся на левый верхний угол ссылки: p.css("left", $(this).position().left - p.width()); p.css("top", $(this).position().top - p.height()); }); } // скрыть эти подсказки var hideHotPrompts = function(){ // путем их тупого удаления: $("a, input").each(function(a){ $(".hotprompt").remove(); }); } // просто функция, проверяющая массив на предмет существования элемента var in_array = function(needle, haystack){ for (key in haystack) if (haystack == needle) return true; return false; } // Если нажата клавиша на странице $("html").keydown(function(e){ var lastGood = false; // то перебираем все ссылки и инпуты, у которых есть атрибут hotkey $("a, input").each(function(a){ var hotkey = $(this).attr("hotkey"); // значение атрибута (например Ctrl + E) var words = hotkey.split("+"); //разделяем значению плюсом // Последний элемент в этом массиве - это сама клавиша: var key = words.pop().replace(/\s/,""); // вытаскиваем её и вырезаем все пробелы var syskeys = new Array(); // Оставшиеся в массиве клавиши считаются системными (Ctrl, Alt, Shift) for(var i in words) syskeys.push(words[i].replace(/\s+/g,"")); if(keyCodes != e.keyCode) return; //код клавиши не подошел - прочь if(in_array("Ctrl", syskeys) && !e.ctrlKey) return; //Ctrl не подошел - прочь if(in_array("Alt", syskeys) && !e.altKey) return; //Alt не подошел - прочь if(in_array("Shift", syskeys) && !e.shiftKey) return;//Shift не подошел - прочь //если на странице несколько одинаковых клавиш, то сработает только последняя: lastGood = $(this); //переменная просто затрется последней подходящей клавишей }); //если подходящая под нажатую комбинацию ссылка (или инпут) таки найдена: if(lastGood){ // то если это форма, то субмитим: if(lastGood.attr("type") == "submit") $(lastGood.context.form).submit(); else{ // а если ссылка, то кликаем var href = lastGood.attr("href"); lastGood.click(); } return false; // и дефолтное поведение браузера отменяем } // А это для прочих случаев: // если нажата клавиша CTRL - то показываем оранжевую карту клавиш if(e.keyCode == keyCodes.Ctrl){ showHotMap(); showHotPrompts(); //и подсказки } }); // на отпускание любой клавиши - скрываем подсказки и карту клавиш $("html").keyup(function(e){ if(e.keyCode == keyCodes.Ctrl){ hideHotPrompts(); hideHotMap(); } }); // если куда-нибудь кликнули - скрываем все подсказки и карту клавиш $("html").click(function(e){ hideHotPrompts(); hideHotMap(); }); // показать оранжевую карту клавиш (тот самый большой квадрат со списком клавиш) var showHotMap = function(){ if($(".hotsitemap").length > 0) return ; // создаем ораньжевый квадрат var hotmap = $(""); $("body").append(hotmap); hotmap.addClass("hotsitemap"); hotmap.css("background-color", "orange"); hotmap.css("position", "fixed"); //он будет не зависить от прокрутки hotmap.css("color", "black"); hotmap.css("top", "200px"); //свисая сверху на двухстах пикселях hotmap.css("padding", "20px"); hotmap.css("border-radius", "10px"); //будучи скруглен, как я люблю hotmap.css("-moz-border-radius", "10px");//даже в мозилле hotmap.append("Горячие клавиши"); // и наполняем его самими клавишами и пояснениями из ссылок $("a").each(function(){ var hotkey = $(this).attr("hotkey"); var value = $(this).html(); // текст ссылки вот этот var title = $(this).attr("title"); // ... // Возмем из этих двоих тот, что подлинне (скорее всего он более информативнее) var display_text = value.length > title.length ? value: title; // И дописываем этот текст и клавишу в квадрат: hotmap.append(""+hotkey+" "+display_text+"
"); }); } // скрыть эту карту var hideHotMap = function(){ $(".hotsitemap").remove(); } });

Говоря русским языком, этот скрипт по нажатию на комбинацию клавиш пробегает по всем элементам, содержащим атрибут hotkey и, если нашел элемент с такой комбинацией - кликает по нему. Если же элементов с такой комбинацией несколько - то кликает по последнему из них.

Также, по нажатию на Ctrl он отображает над каждым горячим элементом всплывающую подсказку о возможности воспользоваться горячей клавишей. Еще, в этот же момент, он отображает блок, в котором списком перечислены все горячие клавиши страницы.

Этот блок хорош тем, что он отображает все, даже скрытые горячие клавиши (т.е. клавиши на ссылках, у которых стоит стиль display:none). Таким образом можно на страницу поместить список скрытых ссылок на всякие разделы, для которых нет соответствующего пункта меню, и породить тем самым еще один короткий путь в эти разделы.

Пользуясь случаем, хочу обратиться к создателям браузеров Уважаемые разработчики! Пожалуйста, включите вы эти 138 строчек кода в сам браузер, неужели это так сложно? Обещаем, мы будем этим пользоваться. Вот читатели Хабра не дадут соврать. И скажем вам за это огромное спасибо! Сжальтесь над нами, теми кто терпит ваши расхождения в стандартах, замысловатости и различия подходов к яваскрипту и атрибутов HTML. Над простыми программистами и верстальщикамии, теми кто с почтением ждет каждый новый атрибут CSS и трудятся как рабы на галерах, на базе возможностей, которые создаете вы, ради того чтобы создать то, что требуют от нас клиенты. Вы стоите у истоков этой пирамиды, и я надеюсь вы осознаете всю важность ответственности, которая ложится на ваши кончики пальцев. Мы ценим и уважаем работу, проделанную вами за все эти годы и я надеюсь вы прислушаетесь к нам и нашим советам.

Дорогие Хаброчитатели, вчера я распрощался со своей старой работой, из-за того, что писал статьи на Хабре. Друзья, я рассчитываю на вас. Если вам не безразлично будущее и развитее браузеров, если вы чувствуете дискомфорт от сложившийся ситуации - действуйте. Вы можете повлиять на существующую несправедливось! Нас читают десятки тысяч людей из сферы IT. Мы можем и должны активно участвовать в формировании необходимых нам тегов, атрибутов, параметров и прочих полезных нововведений. Многое еще не сделано, и если мы будем молчать - неизвестно сколько понадобится времени, чтобы их наконец осенило. Поэтому я прошу отписаться всех тех, кто за то чтобы включить атрибут hotkey в кликабельные элементы HTML.

Я ЗА! Олег Йожик

Теги: Добавить метки