Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Создаем клавиатуру при помощи CSS и jQuery

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Lina (you can also view the original English article)

Иногда бывает просто интересно поэкспериментировать с известными нам языками программирования и посмотреть, что мы может создать с их помощью. Я подумал, что будет прикольно, если мы создадим небольшую онлайн-клавиатуру при помощи CSS и затем реализуем ее функциональные возможности благодаря   jQuery. В клавиатуре будут присутствовать специальные клавиши  (caps lock, shift и delete) для переключения режима клавиатуры. Сегодня я покажу вам, как ее создавать.


Шаг 1: Базовый шаблон на HTML и файлы

Final Product

Для создания этой клавиатуры нам придется изрядно повозиться с кодом HTML и поэкспериментировать с CSS. В качестве каждой клавиши будет выступать элемент неупорядоченного списка. Для каждого элемента списка будет задан класс, с которым будем работать как в CSS, так и в jQuery. Большинство классов – "letter" (* буква – Прим. пер.), "lastitem" (* последний элемент – Прим. пер.) или что-то подобное. Благодаря этому будет легко определить, для чего служит каждая клавиша.

Убедитесь, что создали папку там, где собираетесь использовать эту клавиатуру. Внутри этой папки создайте файл index.html и папки css и  js. И, наконец, создайте файл keyboard.js в папке js и style.css в папке css.

Organization of the files

В HTML-файле мы подключим два файла JavaScript и один файл CSS. Внутри тега body у нас будет огромный неупорядоченный список со всеми буквами, цифрами и некоторыми клавишами для переключения режима клавиатуры. Также в HTML-документе у нас будет текстовое поле с id "keyboard". Сюда будут добавляться все символы. Код ниже необходимо поместить в файл index.html.

Пока что вам не стоит особо беспокоиться о классах элементов. Я объясню, для чего они нам нужны позже, когда будем использовать jQuery. Однако с некоторыми классами (например, right-shift и lastitem) будем работать только в CSS.

The HTML before CSS is applied.

Шаг 2: Приводим список в порядок

Код JavaScript для клавиатуры работал бы отлично и без какого-либо CSS, однако клавиатура не выглядела бы правдоподобно. Я не буду объяснять каждой стилевое правило, поскольку названия большинства из них говорят сами за себя, однако несколько мы разберем. Сохраните следующий код CSS в файл style.css, расположенный в папке css.

Обратите внимание на следующие правила, поскольку они очень важны.

  • .on - в некоторых элементах списка расположено два элемента span. Эти элементы представляют клавиши, на которых может отображаться пара символов, например, клавиши с числами. Элемент span с классом on будет скрыт. Это состояние меняется при нажатии пользователем клавиши shift, однако более подробно об этом вы узнаете при работе с кодом JavaScript.
  • .lastitem - отступ справа последней клавиши в любом ряду будет обнулен, так что макет сохранит свою структуру.
Before and after the CSS is applied.

Шаг 3: Реализуем функциональные возможности клавиш

Если бы вы нажали на элемент списка, то ничего бы не произошло. Сейчас мы это исправим при помощи написания небольшого количества кода для jQuery. Главная идея, которой будем пользоваться, заключается в том, чтобы добавить к каждому элементу обработчик события click, извлечь текст после нажатия клавиши и применить к нему определенное стилевое оформление в зависимости от класса, назначенного этому элементу списка. Впредь мы будем размещать весь код JavaScript в файле keyboard.js file.

Предварительная подготовка

Нам необходимо воспользоваться возможностями jQuery и определить три переменные, которые будем использовать в дальнейшем коде. Это следующие переменные: textarea, shift (* для хранения статуса клавиши shift – Прим. пер.) и capslock (* для хранения статуса клавиши capslock – Прим. пер.).

Далее идет код для добавления обработчика события click всем элементам списка (клавишам). При нажатии клавиши задаются значения двух переменных. $this используем просто для того, чтобы меньше печатать (* в отличие числа символов в $(this) – Прим. пер.), и в character сохраняем код HTML элемента списка. Если элементом списка является буква, то с этой переменной ничего не произойдет и ее содержимое будет напечатано.

Клавиши Shift и Caps Lock

Мы хотим, чтобы при нажатии клавиши shift (элемент списка с классом "left-shift" или "right-shift») переключался (* добавлялся или удалялся – Прим. пер.) класс "uppercase" для каждой буквы. Далее на необходимо, чтобы переключалась видимость тэгов span внутри элементов с классом "symbol". Затем мы меняем логическое значения shift на противоположное (true на false, и наоборот), значение  capslock на false и, наконец, возвращаем false, чтобы переменная character более не менялась.

Теперь переходим к клавише caps lock; при ее нажатии мы переключаем класс "uppercase" элементов списка с буквами, устанавливаем значением capslock true и возвращаем false.

Клавиша Delete

Для реализации функциональной возможности клавиши delete нам необходимо определить другую переменную – html, в которой сохраняется содержимое того, что было в текстовом поле до ее нажатия. После этого мы помещаем в текстовое поле новый код HTML (все то же, за исключением последнего символа). Это осуществляется при помощи метода substr JavaScript. Опять-таки мы возвращаем false для того, чтобы прервать выполнение кода ниже.

The markup behind the delete key.

Специальные символы

Если нажатие совершено по элементам списка, которые представляют не букву и не какую-либо клавишу для переключения режима клавиатуры, то для переменной character мы задаем особенное значение. Если нажатие совершено по элементам списка с классом  "symbol", то в character сохраняется содержимое видимого в тот момент элемента span. Элемент с классом space (не удивительно) используется для добавления пробела. Действие клавиши tab реализуется при помощи \t, и, наконец, переход на новую строку (действие клавиши return) – при помощи \n.

The markup behind the symbol keys.

Прописные буквы

Если вы помните, то когда мы задавали поведение для клавиш shift и caps lock, класс "uppercase" либо добавлялся, либо удалялся при помощи функции  toggleClass. При наличии класса uppercase регистр символа в character меняется на верхний при помощи метода toUpperCase.

Повышаем гибкость переключения режимов клавиатуры

При пользовании стандартной клавиатурой вам обычно необходимо, чтобы клавиша shift влияла только на одну букву.  Если значение переменной shift равно true, то нам необходимо, чтобы была переключена видимость  элементов span с символами. Также здесь происходит следующее: если значением клавиши является "on", то переключается регистр клавиши.

В завершение символ добавляется к текстовому полю, и пользователь может продолжить «печатать».

Окончательный код JavaScript

Final Product

Заключение

Иногда полезно поэкспериментировать с технологиями, даже если конечный продукт создан просто для себя. За счет применения нескольких классов к нашим элементам мы смогли реализовать функциональные возможности клавиатуры при помощи CSS и jQuery. Наша клавиатура может быть полезна. Я видел веб-сайты, где имеется возможность использовать экранную клавиатуру.  Однако основная цель создания этой клавиатуры – познакомиться поближе с возможностями, которые нам предоставляет CSS и jQuery.

  • Подпишитесь на нас на Twitter или на NETTUTS RSS Feed, чтобы быть в курсе о новых руководствах и статьях по веб-разработке.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.