Klávesnice je jedním z hlavních zařízení pro interakci člověka s počítačem. Webový vývoj se neobejde bez zpracování kláves klávesnice. Klíčovým bodem interakce s klávesnicí webové stránky je zpracování událostí, ke kterým dochází při stisknutí a uvolnění kláves.
V programovacím jazyce JavaScript existuje řada událostí, které lze použít ke zpracování událostí klávesnice. Jedním z nejpoužívanějších způsobů, jak ovládat události klávesnice, je použití objektu addEventListener(). Tato metoda umožňuje přidávat obslužné rutiny událostí přímo do kódu JavaScriptu, což usnadňuje a jasně definuje zpracování každé klávesy.
V této příručce se podíváme na hlavní klávesové události v JavaScriptu a ukážeme příklady jejich použití. Podíváme se na to, jak zvládnout události stisku a uvolnění kláves a jak pracovat s různými klávesami, včetně speciálních kláves a kombinací kláves.
Stisk klávesy klávesnice v JavaScriptu
Prvním způsobem je aplikace události keydown. K této události dochází, když je klávesa stisknuta a podržena. Chcete-li sledovat tuto událost, můžete k položce Přidat obslužnou rutinu, na kterou se chcete zaměřit. Pokud například potřebujete sledovat stisky kláves v celém okně, můžete na objekt použít obslužnou rutinu document.
Druhým způsobem je událost keypress. K této události dochází pouze po stisknutí znakové klávesy. Stejně jako událost keydown, lze přidat obslužnou rutinu k položce nebo k objektu document.
Konečně událost keyup nastává, když se uvolní klávesa. Tuto událost lze také zpracovat pomocí obslužného programu událostí.
Výše uvedené metody umožňují snadné sledování stisků kláves klávesnice v JavaScriptu a provádění příslušných akcí. Použijte je ve svých projektech, abyste uživatelům poskytli interaktivní a citlivý zážitek!
Průvodce pro začátečníky
Úvod
Stisk klávesy klávesnice je jednou z hlavních funkcí interakce s webovými aplikacemi. JavaScript má schopnost zpracovávat události související s stisknutím kláves, což vývojářům umožňuje vytvářet interaktivní a citlivá uživatelská rozhraní.
Zpracování událostí klávesnice
Ke zpracování stisku kláves se v JavaScriptu používají metody addEventListener () nebo onkeydown (). Tyto metody umožňují propojit funkci obslužného programu události s určitými událostmi klávesnice.
Příklad zpracování stisknutí klávesy:
document.addEventListener('keydown', function(event) ); Vlastnosti události klávesnice
Událost klávesnice v JavaScriptu poskytuje různé vlastnosti, které lze použít k získání informací o stisknuté klávese. Některé z těchto vlastností zahrnují key (obsahuje symbol stisknuté klávesy), keyCode (obsahuje číselný kód stisknuté klávesy) a shiftKey (určuje, zda byla stisknuta klávesa Shift).
Příklad použití vlastností události klávesnice:
document.addEventListener('keydown', function(event) ); Práce s různými typy kláves
JavaScript vám umožňuje zpracovávat různé typy kláves, jako jsou písmena, číslice, funkční klávesy atd. K určení typu klávesy lze použít různé podmínky uvnitř funkce obslužného programu události.
Příklad zpracování různých typů kláves:
document.addEventListener('keydown', function(event) else if (event.key === 'Escape') else if (event.keyCode >= 48 && event.keyCode else >); Závěr
Zpracování stisku kláves klávesnice v JavaScriptu je důležitou funkcí pro vytváření interaktivních uživatelských rozhraní. Znalost základů práce s událostmi klávesnice vám pomůže vytvořit pohodlnější a funkčnější webové aplikace.
Základní pojmy
Při práci se stisknutím kláves klávesnice v JavaScriptu je důležité porozumět několika základním pojmům:
Akce keydown: k této události dochází, když je stisknuta klávesa klávesnice.
Akce keyup: k této události dochází, když je klávesa klávesnice uvolněna.
Kódy kláves: každá klávesa klávesnice má svůj vlastní jedinečný kód, který ji definuje. Například klávesa " A "má kód 65 a klávesa" Enter " má kód 13.
Vlastnosti keyCode: je to vlastnost objektu události, která obsahuje kód stisknuté klávesy.
Vlastnosti key: je to vlastnost objektu události, která obsahuje symbol stisknuté klávesy.
Modifikátory kláves: jedná se o klávesy, které mohou změnit chování jiných kláves, jako je Shift, Ctrl nebo Alt. Mohou být použity ve spojení s jinými klávesami k provádění speciálních akcí.
Pochopení těchto základních pojmů vám pomůže efektivněji pracovat s klávesami klávesnice v JavaScriptu a vytvářet interaktivní webové aplikace a hry.
Klávesové události v JavaScriptu
Události klávesnice v JavaScriptu vám umožňují sledovat aktivity uživatele s klávesnicí na webové stránce. S těmito událostmi můžete reagovat na stisknutí určitých kláves, zpracovávat textové vstupy a vytvářet interaktivní funkce.
Jednou z nejpoužívanějších klávesových událostí je událost "keydown" (stisknutí klávesy). Spustí se, když uživatel stiskne klávesu na klávesnici. Událost "keydown" lze použít k určení stisknutí určité klávesy a provedení určité akce v reakci na tuto událost.
Další důležitou klávesovou událostí je událost "keyup" (uvolnění klávesy). Spustí se, když uživatel uvolní klávesu na klávesnici. Událost "keyup" může být použita k provedení určitých akcí, když je klávesa uvolněna.
K dispozici je také událost "keypress" (stisk a podržení klávesy), která se spustí, když je klávesa stisknuta a podržena (Dlouhé stisknutí). Tato událost má však omezené možnosti a v moderních webových aplikacích se používá jen zřídka.
Klávesové události v JavaScriptu poskytují mnoho možností pro zpracování kláves uživatelem. Mohou být použity k vytváření her, interaktivních tvarů, klávesových zkratek a dalších užitečných funkcí. Naučit se události klávesnice vám pomůže vytvořit uživatelsky přívětivější a intuitivnější rozhraní na vašem webu.
Registrace událostí
K registraci událostí klávesnice v JavaScriptu je třeba použít metodu addEventListener() . Tato metoda umožňuje přiřadit funkce obslužné rutiny událostí určitého typu.
Pro registraci události stisky kláves na klávesnici je třeba použít typ události keydown . Chcete-li provést jakékoli kroky při uvolnění kláves, musíte použít typ Události keyup .
Příklad použití metody addEventListener () k registraci událostí:
document.addEventListener('keydown', function(event) );document.addEventListener('keyup', function(event) ); V uvedeném příkladu, po stisknutí libovolné klávesy na klávesnici, se do konzole zobrazí zpráva "stisknutá klávesa". Po uvolnění klávesy se do konzole zobrazí zpráva "klávesa je uvolněna".
Obslužná rutina události by měla být funkcí, která se provede, když dojde k události. Funkce může přijmout argument event, který obsahuje informace o události, jako je Kód stisknuté klávesy.
Je také možné zaznamenávat události nejen na celém dokumentu, ale také na jednotlivých prvcích pomocí jejich metody addEventListener() . Chcete-li například zaznamenávat události pouze na konkrétním tlačítku:
var button = document.querySelector('button');button.addEventListener('keydown', function(event) ); V tomto příkladu, když stisknete klávesu na tlačítku, zobrazí se v konzoli zpráva "stisknutá klávesa".
Přiřazení zpracovatelů událostí
Přiřazení obslužné rutiny události ke stisknutí klávesy se provádí pomocí metody addEventListener (). Tato metoda má dva argumenty: typ události a funkci-obslužný program.
document.addEventListener('keydown', function(event) );Ve výše uvedeném příkladu přiřadíme obslužnou rutinu události 'keydown' pro celý dokument. Když uživatel stiskne klávesu, je povolána funkce obslužné rutiny, která předává objekt události jako argument.
Objekt události obsahuje informace o události, jako je typ události, kód klávesy a další vlastnosti. Tyto vlastnosti můžeme použít k provádění určitých akcí v závislosti na stisknuté klávese.
Můžeme například zkontrolovat kód stisknuté klávesy a provést určitou akci:
document.addEventListener('keydown', function(event) >);V tomto příkladu testujeme kód stisknuté klávesy pomocí vlastnosti keycode objektu události. Pokud se kód shoduje s kódem klávesy Enter (kód 13), provedeme určitou akci.
Přiřazení obslužné rutiny událostí ke stisknutí klávesy klávesnice v JavaScriptu nám tedy umožňuje sledovat a reagovat na akce uživatele a výrazně tak rozšířit možnosti interaktivity webových stránek.
Objekt události
| Vlastnost | Popis |
|---|---|
| type | Vrací typ události, jako je "keydown", "keyup" atd. |
| target | Vrací prvek, na kterém se událost stala |
| keyCode | Vrací číselnou hodnotu klávesy, která byla stisknuta, kde má každá klávesa svůj vlastní kód. Například kód 13 odpovídá klávese "Enter". |
| which | Podobně jako vlastnost keyCode vrací číselnou hodnotu klávesy. Obvykle se používá ve starších verzích prohlížečů, které nepodporují vlastnost keyCode. |
Objekt události v JavaScriptu poskytuje informace o události, která se stala na webové stránce. Když uživatel stiskne klávesu na klávesnici, dojde k události "keydown" nebo "keyup" a objekt události obsahuje informace o stisknuté klávese.
Jednou z nejčastěji používaných vlastností objektu události je "keyCode" nebo "which". Umožňují určit, která klávesa byla stisknuta. Pokud například chcete zkontrolovat, zda byla stisknuta klávesa "Enter", můžete použít vlastnost" keyCode "nebo" which "a porovnat ji s číselnou hodnotou klávesy" Enter " (obvykle je to hodnota 13).
Vlastnost" cíl " objektu události vrací prvek, na kterém se událost stala. To může být užitečné, pokud je na stránce více položek, z nichž každá musí reagovat na stisknutí kláves. Tuto vlastnost můžete použít k určení, který prvek událost vytvořil.
Vlastnost" typ " objektu události vrací typ události, tj. "keydown", "keyup" a tak dále. Může být také užitečné, pokud potřebujete provádět různé akce v závislosti na typu události.
Vlastnosti objektu události
Když dojde k události stisknutí klávesy na klávesnici, prohlížeč vytvoří objekt události, který obsahuje informace o události, která se stala. Tento objekt má několik vlastností, které vám umožňují získat informace o stisknuté klávese.
Některé z nejužitečnějších vlastností objektu události:
- event.key-vrací hodnotu klávesy jako řádek. Může to být písmeno, číslice, symbol nebo jedna ze speciálních kláves, jako je Enter, Escape nebo Backspace.
- event.keyCode-vrací číselný kód klávesy. Každá klávesa na klávesnici má jedinečný kód.
- event.shiftKey-vrátí true, pokud je v okamžiku stisknutí klávesy podržena klávesa Shift, a false jinak.
- event.ctrlkey-vrátí true, pokud je v okamžiku stisknutí klávesy podržena klávesa Ctrl, a false jinak.
- event.altKey-vrátí true, pokud je v okamžiku stisknutí klávesy podržena klávesa Alt, a false jinak.
Pomocí těchto vlastností lze implementovat mnoho zajímavých funkcí, jako je identifikace klávesy nebo kontrola, zda byla stisknuta klávesa s modifikátorem (Shift, Ctrl, Alt).