Тег <kbd> в HTML — клавіші й ввід з клавіатури
HTML теґ <kbd> позначає текст, що може бути введений з клавіатури (наприклад, консольна команда) або комбінації клавіш, що можуть бути натиснені.
Браузери, зазвичай, позначають текст у контейнері <kbd> моноширінним шрифтом.
Загальний опис
автор: NagarD
- Порада
-
Цей тег не застарів, але можна досягти більшого ефекту за допомогою CSS.
автор: с3с
Синтаксис
<kbd>Текст</kbd>У <kbd> відсутні власні елементи.
<kbd> не підтримує жодних загальних елементи.
| Назва | Опис |
|---|---|
| onafterprint | Скрипт виконується тільки після як документ надрукований. |
| onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
| onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
| onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
| onload | Викликається після того як завантаження елемента завершене. |
| onmessage | Скрипт виконується коли викликане повідомлення. |
| onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
| ononline | Спрацьовує коли браузер починає працювати в режимі онлай. |
| onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
| onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
| onpopstate | Скрипт виконується коли змінено історію одного вікна. |
| onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
| onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
| onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
| onblur | Скрипт виконується, коли елемент втрачає фокус. |
| onchange | Викликається в той момент, коли значення елемента змінюється. |
| oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
| onfocus | Викликається в той момент, коли елемент отримує фокус. |
| oninput | Скрипт викликається коли користувач вводить дані поле. |
| oninvalid | Скрипт виконується, коли елемент недійсний. |
| onreset | Викликається, коли натискається у формі кнопка типу Reset. |
| onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
| onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
| onsubmit | Викликається при відправленні форми. |
| onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
| onkeypress | Викликається коли корисрувач натиснув на клавішу. |
| onkeyup | Викликається коли користувач відпускає клавішу. |
| onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
| ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
| ondrag | Періодично викликається при операції перетягування. |
| ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
| ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
| ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення. |
| ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
| ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
| ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
| onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
| onmousemove | Викликається, коли курсор миші переміщається над елементом. |
| onmouseout | Викликається, коли курсор виходить за межі елемента. |
| onmouseover | Виконується, коли курсор наводиться на елемент. |
| onmouseup | Викликається, коли користувач відпускає кнопку миші. |
| onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
| onwheel | Викликається, коли користувач прокручує коліщатко миші. |
| oncopy | Викликається, коли користувач копіює вміст елемента. |
| oncut | Викликається, коли користувач вирізає вміст елемента. |
| onpaste | Викликається, коли користувач вставляє вміст в елемент. |
| onabort | Виконується при перериванні якоїсь події. |
| oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
| oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію. |
| oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
| ondurationchange | Викликається коли змінюється довжина медіа файлу. |
| onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
| onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
| onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
| onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
| onloadeddata | Викликається коли медіа данні завантажено. |
| onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера. |
| onpause | Викликається коли відтворення медіа даних призупинено. |
| onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
| onplaying | Викликається коли розпочато відтворення медіа даних. |
| onprogress | Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. |
| onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
| onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
| onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
| onstalled | Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані. |
| onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження. |
| ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
| onvolumechange | Викликається коли змінюється гучність звуку. |
| onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
| ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
| onerror | Викликається якщо при завантаженні елемента сталася помилка. |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Клавіші як клавіші: стилізація вкладених <kbd> без зайвої рамки навколо комбінації
HTML
<p>Скопіювати: <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd></p>
<p>Відкрити консоль браузера: <kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></kbd></p>
<p>Скасувати дію: <kbd><kbd>Ctrl</kbd> + <kbd>Z</kbd></kbd></p>
<p class="hint">А ось той самий теґ без стилів — усе, що дає браузер сам:
<kbd class="plain">Esc</kbd></p>CSS
body {
font: 16px/2 sans-serif;
}
/* зовнішній kbd — лише обгортка комбінації, оформлення на ньому немає */
kbd kbd {
display: inline-block;
min-width: 1em;
padding: 2px 8px;
border: 1px solid #b4b4b4;
border-radius: 4px;
background: linear-gradient(#fff, #f0f0f0);
box-shadow: 0 1px 0 #b4b4b4;
font-family: inherit;
font-size: 0.85em;
line-height: 1.5;
color: #333;
}
.plain {
font-family: monospace;
}
.hint {
color: #666;
}Найпростіший приклад використання HTML теґа <kbd>
HTML
<h3>Приклад використання тегу <code>kbd</code></h3>
<h4>Поєднання клавіш у Windows:</h4>
<p><kbd>Ctrl</kbd>+<kbd>Tab ↹</kbd> — перемикання між закладками або вікнами однієї програми;<br>
<kbd>Alt</kbd>+<kbd>F4</kbd> — закрити активне вікно;<br>
<kbd>Alt</kbd>+<kbd>Space</kbd> (пропуск) — відкриття системного меню вікна. За допомогою нього можна закривати, згортати, розгортати, переміщати і змінювати розмір вікна без допомоги миші;<br>
<kbd>Alt</kbd>+ <kbd>Shift</kbd> або <kbd>Ctrl</kbd>+<kbd>Shift</kbd> — перемкнути мову;<br>
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd> — відкриття вікна «Диспетчер завдань» або «Безпека Windows»;<p>CSS
kbd {
background: #ccc;
border-radius: 3px;
padding: 0 4px;
}CSS стиль без задання
kbd {
font-family: monospace;
}Коментарі
Коментарів ще немає — будьте першим!