Omezení vstupu pomocí nástroje JQuery
Pokud existuje jedna věc, která mě pohání šíleně online, je to, když vstupní formuláře dovolí mi zadat nesprávná data, pouze abych uvedl chybu poté, co jsem ji zkusil a odeslat. Zdá se, že polovina formulářů, které předkládám, musí být opětovně naplněna a znovu odeslána, protože jsem nezapsal velké heslo do svého hesla, nebo jsem to udělal, nebo heslo může být pouze číselné nebo nějaký jiný požadavek, o kterém nikdo nepomyslel.
Způsob, jakým funguje mozek, hledáme řešení založená na nástrojích před sebou. Nezadáte velká písmena v bankomatu? Ne, protože klávesnice ATM má pouze čísla. Mohlo byste omylem zasadit špatné číslo, ale nikdy jste se nepokusili zadat svou e-mailovou adresu nebo rodné jméno vaší matky.
Tam je problém, klávesnice, kterou používáte, komplikuje zadávání dat online. Pravděpodobně má mezi 75 a 100 klávesami a ještě více znaků je snadno přístupné tím, že drží víceklíčové kombinace. Použití pro přihlášení do Facebooku je spíše jako vyskakování mléka v Ferrari.
Samozřejmě, klávesnice musí mít více vstupních možností, než jaké vyžaduje nějaké konkrétní pole, protože je to víceúčelový nástroj; nemůžete prakticky mít jinou klávesnici pro každý možný typ vstupu.
To vede k závažnému problému s použitelností: uživatelé jsou neustále požádáni o "opravu" svých informací podle formy. To je skvělý způsob, jak zvýšit frustraci a ztratit obchod.
Zařízení s dotykovým displejem učinila v této oblasti velké pokroky tím, že změnila klávesnici na obrazovce, aby přizpůsobila možné vstupy a požadované údaje. zadejte například e-mailovou adresu v zařízení iPhone a nebudete moci omylem zadat mezeru, protože není k dispozici mezerník.
Obrázek digitální klávesnice přes Shutterstock
Dokud nebudeme všichni pracovat na dotykových obrazovkách, potřebujeme dočasné řešení a ve skutečnosti je to poměrně jednoduché: pomocí jQuery můžeme sklouznout vrstvu inteligence mezi klávesnicí a vstupním polem a přijmout data pouze tehdy, pokud spadá do očekávaných mezí , ignorovat něco mimo tyto hranice, věří, že je to chyba.
Nejprve musíme nastavit vstupní pole v HTML, které chceme omezit, například telefonní číslo:
Pak v hlavě dokumentu potřebujeme importovat jQuery:
A bezprostředně poté přidejte následující skript:
Tento skript se spustí, jakmile je dokument připraven, připojením metody stisknutí klávesy do pole .phoneInput . Poté zjistíme, který klíč byl stisknut na základě vlastnosti charCode - číslice 0 je přiřazena kódu 48, 1 je 49 a tak dále - jakýkoliv klíč, který je mimo náš rozsah, by měl vrátit falešnou hodnotu. Pokud metoda vrátí hodnotu false, prohlížeč jednoduše ignoruje stisknutí klávesy.
To znamená, že pokud uživatel uhodí libovolný klíč, který není 0-9, bude vstup ignorován a účinně omezuje vstup na čísla.
Můžeme použít stejnou techniku pro téměř všechny oblasti, vytvářet složitá pravidla pomocí logického AND a logického OR. Pokud bychom například chtěli omezit zadávání příjmení, museli bychom omezit vstup na malá písmena (97-122), velká písmena (65 - 90) a příležitostná pomlčka (45):
$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});Můžeš vyzkoušejte zde demo .
Tento kód je progresivní vylepšení. Bude to trvat na vašem ověření serveru, ale to neznamená, že byste také neměli ověřovat informace, které shromažďujete.
Prevence, jak se říká, je lepší než lék; a pomocí tohoto tipu uvidíte snížení počtu lidí, kteří začínají, ale nevyplňují vaše formuláře, zvláště pokud se jedná o komplexní požadavky na údaje.
Uživatelé pravidelně dělají chyby ve vašich formulářích? Jak zvládnete chyby? Dejte nám vědět v komentářích.
Doporučený snímek / náhled: obrázek klávesnice přes Shutterstock