Begränsa Inmatning med JQuery
Om det finns en sak som driver mig galen på nätet, är det när inmatningsformulär tillåter mig att ange felaktiga data, bara för att påpeka misstaget när jag försökte skicka in den. Det verkar som att hälften av formuläret jag skickar måste fyllas på och skickas in igen eftersom jag inte innehöll en stor bokstav i mitt lösenord, eller det gjorde jag, eller lösenordet kan bara vara numeriskt eller något annat krav som ingen trodde att nämna.
Hur hjärnan fungerar, letar vi efter lösningar baserade på verktygen framför oss. Du skriver inte upp stora bokstäver på ATM gör du? Nej, eftersom ATM-knappsatsen bara har siffror. Du kan felaktigt slå fel nummer, men du har aldrig försökt att skriva in din e-postadress eller din mammas jungfrun.
Där ligger problemet, det tangentbord som du använder komplicerar inmatning av data online. Det har förmodligen mellan 75 och 100 tangenter och ännu fler tecken är lättillgängliga genom att hålla flera tangentkombinationer. Att använda det för att logga in på Facebook är ganska som att poppa ut för mjölk i en Ferrari.
Självklart måste ditt tangentbord ha fler inmatningsalternativ än vad ett visst formulärfält kräver, eftersom det är ett verktyg för flera ändamål. Du kan inte praktiskt taget ha ett annat tangentbord för varje möjlig typ av ingång.
Detta leder till en allvarlig användbarhet fråga: användare är ständigt uppmanas att "korrigera" deras information för att passa en blankett. Det är ett bra sätt att öka frustrationen och förlora affärer.
Touchscreen-enheter har gjort stora framsteg i detta område genom att ändra skärmtangentbordet för att skräddarsy de typer av ingång som är möjliga, till de data som krävs Ange exempelvis en e-postadress på en iPhone, och du kommer inte att kunna skriva in ett mellanslag, eftersom mellanslagstangenten inte finns.
Digital tangentbordsbild via Shutterstock
Innan vi alla arbetar med pekskärmar behöver vi en tillfällig lösning, och det är faktiskt ganska enkelt: med jQuery kan vi glida ett intelligent lager mellan tangentbordet och ingångsfältet och acceptera endast data om det faller inom förväntat gränser , ignorerar något utanför dessa gränser, säker på att det är ett fel.
Först måste vi skapa ett inmatningsfält i HTML som vi vill begränsa, till exempel ett telefonnummer:
Därefter måste vi importera jQuery i dokumentets huvud:
Och omedelbart efteråt lägg till följande skript:
Detta skript körs när dokumentet är klart, bifogar en knapptryckningsmetod till inputfältet . Vi identifierar sedan vilken tangent som har tryckts baserat på charCode- egenskapen - numret 0 är tilldelat koden 48, 1 är 49 osv. - En nyckel som ligger utanför vårt sortiment ska returnera falskt. Om metoden returnerar felaktigt ignorerar webbläsaren helt enkelt tangenttrycket.
Detta betyder att om användaren träffar någon tangent som inte är 0-9 kommer inmatningen att ignoreras, vilket effektivt begränsar inmatningen till siffror.
Vi kan tillämpa samma teknik på nästan vilket som helst fält, bygga upp komplexa regler med hjälp av logiska OCH och logiska OR. Om vi till exempel vill begränsa inmatning till efternamn, skulle vi behöva begränsa inmatning till små bokstäver (97-122), stora bokstäver (65 - 90) och enstaka bindestreck (45):
$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});Du kan prova en demo här .
Denna kod är en progressiv förbättring. Det kommer att ta en del av belastningen av din servervalidering, men det betyder inte att du inte heller bör validera information som du samlar.
Förebyggande, som sagt säger, är bättre än botemedel; och med hjälp av det här tipset ser du en minskning av antalet personer som börjar, men fyller inte i dina formulär, särskilt när komplexa datakrav är inblandade.
Gör användare regelbundet misstag på dina blanketter? Hur hanterar du misstagen? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild: tangentbordsbild via Shutterstock