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

Створюємо клавіатуру за допомогою CSS та jQuery

by
Read Time:9 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Іноді буває просто цікаво поекспериментувати з відомими нам мовами програмування та подивитися, що ми можемо створити з їх допомогою. Я подумав, що буде прикольно, якщо ми створимо невелику онлайн-клавіатуру за допомогою CSS і потім реалізуємо її функціональні можливості завдяки jQuery. У клавіатурі будуть спеціальні клавіши (caps lock (* фіксація верхнього регістру. Тут і надалі примітка перекладача), shift (* переключення регіcтра [клавіатури]) та delete) для переключення режимів клавіатури. Сьогодні я покажу вам, як її створювати.


Крок 1: Базовий шаблон на HTML та файли

Final ProductFinal ProductFinal Product

Для створення цієї клавіатури нам доведеться чимало попорпатися з кодом HTML та поекспериментувати з CSS. В якості кожної клавіши буде виступати елемент невпорядкованого списку. Для кожного елемента буде створено клас, з яким будемо працювати як в CSS, так і в jQuery. Більшість класів – "letter" (* буква), "lastitem" (* останній елемент) або щось подібне. Завдяки цьому буде легко визначити, для чого служить кожна клавіша.

Впевніться, що створили папку там, де збираєтеся використовувати цю клавіатуру. Всередині цієї папки створіть файл index.html і папки css та js. І, нарешті, створіть файл keyboard.js у папці js та style.css у папці css.

Organization of the filesOrganization of the filesOrganization of the files

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

Поки що вам не варто особливо турбуватися про класи елементів. Я поясню, для чого вони нам потрібні пізніше, коли будемо використовувати jQuery. Проте з деякими класами (наприклад, right-shift та lastitem) будемо працювати тільки в CSS.

The HTML before CSS is applied.The HTML before CSS is applied.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.Before and after the CSS is applied.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 елемента списку. Якщо елементом списку є буква, то з цією змінною нічого не відбудеться і її вміст буде надруковано.

Клавіши переключення регістра [клавіатури] та клавіша 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.The markup behind the delete key.The markup behind the delete key.

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

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

The markup behind the symbol keys.The markup behind the symbol keys.The markup behind the symbol keys.

Великі букви

Якщо ви пам'ятайте, коли ми задавали поведінку для клавіш shift та caps lock, клас "uppercase" або додавався, або видалявся за допомогою функції toggleClass. За наявності класу uppercase регістр символу у character змінюється на верхній за допомогою методу toUpperCase.

Підвищуємо гнучкість переключення режимів клавіатури

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

Під кінець символ додається до текстового поля, і користувач може продовжувати «друкувати».

Остаточний код JavaScript

Final ProductFinal ProductFinal Product

Завершення

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

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


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.