Prechod na nové pole formulára pomocou klávesy enter

Dnes si ukážeme ako vytvoriť formulár, v ktorom sa budeme po jednotlivých prvkoch pohybovať po stlačení klávesy Enter. Ak by sme zabudli vyplniť nejaký prvok, JavaScript nás naň opäť nasmeruje. Teda formulár sa nám odošle až potom, keď budú vyplnené všetky prvky a stlačíme Enter. Najlepšie bude, ak si hneď na úvod ukážeme ako náš formulár pracuje.

Ukážka formulára:

Rozdiel medzi klasickým formulárom a našim je v tom, že medzi jednotlivými prvkami nepotrebujeme stláčať klávesu Tab, alebo klikať myšou na ďalší prvok. Jednoducho zakaždým vyplneným prvkom stlačíme Enter. Ak sme už vyplnili všetky potrebné údaje a pri poslednom vypĺňanom prvku stlačíme Enter, formulár sa odošle. Môžete si vyskúšať, čo sa stane, ak nevyplníte nejaký údaj a stlačíte Enter. V takomto prípade sa formulár neodošle, ale kurzor sa nastaví do nevyplneného prvku. Darmo by ste taktiež klikali na odosielacie tlačítko, formulár sa neodošle.

Ukážeme si, ako sa správa prvok <input> v IE a NN. Ak sa vo formulári nachádza len jeden <input>, môžeme tento formulár odoslať stlačením klávesy Enter a nie je potrebné tlačítko "submit". Ak budeme mať vo formulári viac ako jeden <input> je potrebné na odoslanie tlačítko "submit" a v IE môžeme tento formulár odoslať aj stlačením Enter vo formulárovom prvku.

Ak by sme chceli zabezpečiť rovnaké správanie prehliadačov, je potrebné pomocou ovládača udalostí onKeyDown kontrolovať, či nebol stlačený Enter. Aby sme zistili, ktorá kláves bola stlačená, využijeme objekt event. Pre NN použijeme vlastnosť which a pre IE keyCode. Obe vlastnosti nám vrátia kód (číslo od 0 do 255) stlačenej klávesy.

Na zobrazenie stlačeného písmena, čísla, alebo znaku sa používa metóda fromCharCode(číslo1, ..., čísloN), kde číslo1, ..., čísloN je napr. kód stlačenej klávesy. Túto metódu je potrebné používať s objektom String, teda String.fromCharCode(73 ,110 ,116, 101 ,114 ,118 ,97 ,108) nám vráti reťazec "Interval".

Tu je ukážka.

A tu zdroj:

Metóda charCodeAt(index), kde index je číslo od 0 do dĺžky reťazca pracuje presne opačne, teda nám vráti číslo znaku, ktorý je na pozícii index. "Interval".charCodeAt(0) nám vráti číslo 73.

Tu je ukážka.

Zdrojový kód uvedeného príkladu:

Teraz si metódu fromCharCode ukážeme v praktickejšom príklade:

Ak používate NN a prihlasujte sa na nejakú stránku svojim menom a heslom, darmo by ste v NN stláčali Enter na odoslanie vyplnených informácií. Je potrebné myšou kliknúť na samostatné tlačítko pre odoslanie. V IE je situácia o niečo lepšia, my si však ukážeme, ako zabezpečíme aby sa IE aj NN správali rovnako a formulár sa odoslal, až keď budú vyplnené všetky potrebné informácie.

Nech sa páči, tu je zdrojový kód formulára, ktorý sa odošle pri stlačení klávesy Enter až vtedy, keď budú vyplnené všetky potrebné informácie:

Ako to celé funguje?

Pomocou ovládača udalostí onKeyDown kontrolujeme, či nebola stlačená kláves Enter, samozrejme pre objekt event použijeme tú vlastnosť, ktorej rozumie náš prehliadač. Ak bol stlačený Enter, alebo sme klikli na odosielacom tlačítku prekontrolujeme všetky prvky formulára, okrem odosielacieho tlačítka (počet týchto prvkov je document.forms.inteligent.length-1), či sú vyplnené. Ak narazíme na nevyplnený prvok zameráme naň kurzor metódou focus() a pomocou return opustíme funkciu. Ak je vyplnený celý formulár, odošleme ho metódou submit(). Jednoduché, ale účinné.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.