Takmarka inntak með JQuery
Ef það er eitt sem rekur mig geðveikt á netinu, þá er það þegar innsláttareyðublöð leyfa mér að slá inn rangar upplýsingar, aðeins til að benda á mistökin eftir að ég reyni að senda það inn. Það virðist sem helmingur eyðublaðanna sem ég legg fyrir þarf að endurnýjast og leggja fram aftur vegna þess að ég tók ekki upp hástafi í lykilorði mínu eða gerði það eða lykilorðið getur aðeins verið tölulegt eða einhver önnur krafa sem enginn hugsaði um að nefna.
Hvernig heilinn virkar, leitumst við að lausnum sem byggjast á tækjunum fyrir framan okkur. Þú slærð ekki upp hástaf bréf í hraðbankanum? Nei, því ATM takkarnir hafa aðeins númer. Þú gætir mögulega lent í rangt númer, en þú hefur aldrei reynt að slá inn netfangið þitt eða nafnsnafn móður þinnar.
Þar liggur vandamálið, lyklaborðið sem þú notar gerir flókið inntak á gögnum á netinu. Það hefur líklega milli 75 og 100 lykla og jafnvel fleiri stafir eru aðgengilegar með því að halda multi-lykill samsetningar. Notkun þess að skrá þig inn í Facebook er frekar eins og að pabba út fyrir mjólk í Ferrari.
Auðvitað þarf lyklaborðið þitt að hafa fleiri innsláttarvalkosti en nokkur formleg eyðublað krefst, vegna þess að það er fjölnotabúnaður; Þú getur ekki nánast annað lyklaborð fyrir alla mögulega tegund inntaks.
Þetta leiðir til alvarlegra nothæfisvandamála: Notendur eru stöðugt beðnir um að "leiðrétta" upplýsingarnar til þess að henta formi. Það er frábær leið til að auka gremju og missa viðskipti.
Touchscreen tæki hafa gert mikla skref á þessu sviði með því að breyta onscreen lyklaborðinu til að sníða þær tegundir inntak sem mögulegt er, til þeirra gagna sem krafist er; Sláðu td inn netfang á iPhone, og þú munt ekki geta slegið inn rými með mistökum vegna þess að bilið er ekki til staðar.
Stafrænt lyklaborðsmynd um Shutterstock
Þangað til við erum öll að vinna á snertiskjánum, þá þurfum við tímabundna lausn, og það er í raun einfalt: með jQuery getum við skilið lag af upplýsingaöflun milli lyklaborðsins og innsláttarsvæðisins og aðeins tekið á móti gögnum ef það fellur undir áætlaða mörk , hunsa eitthvað utan þessara marka, fullviss um að það sé villa.
Í fyrsta lagi þurfum við að setja upp inntaksvettvang í HTML sem við viljum takmarka, símanúmer til dæmis:
Þá, í höfuðið á skjalinu, þurfum við að flytja inn jQuery:
Og strax eftir að bæta við eftirfarandi handriti:
Þessi handrit rennur einu sinni þegar skjalið er tilbúið og festir takkaborð við inntaksreitinn. Við uppgötva síðan hvaða lykill hefur verið ýttur á grundvelli charCode eignarinnar - númerið 0 er úthlutað kóðanum 48, 1 er 49 og svo framvegis - hvaða lykill sem er utan okkar svið ætti að koma aftur á ósatt. Ef aðferðin skilar rangar mun vafrinn einfaldlega hunsa takkann.
Þetta þýðir að ef notandinn smellir á einhvern takka sem er ekki 0-9 þá verður inntakið hunsað með því að takmarka inntakið í númer.
Við getum beitt sömu tækni við nánast hvaða reit sem er, byggja upp flóknar reglur með rökréttum og rökrétt OR. Til dæmis, ef við viljum takmarka inntak fyrir eftirnafn, þá ættum við að takmarka inntak í lágstafir (97-122), hástafir (65-90) og einstaka bindi (45):
$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});Þú getur prófa kynningu hér .
Þessi kóði er framsækið aukning. Það mun taka nokkuð af álaginu frá staðfestingu miðlara þinna, en það þýðir ekki að þú ættir ekki einnig að staðfesta upplýsingar sem þú ert að safna saman.
Forvarnir, eins og sagt er, er betra en lækning; og með því að nota þessa þjórfé sjáum við lækkun á fjölda fólks sem byrjar, en ekki ljúka eyðublöðum þínum, sérstaklega þegar flóknar kröfur um gagn er að ræða.
Gera notendur reglulega mistök á eyðublöðum þínum? Hvernig sérðu um mistökin? Láttu okkur vita í athugasemdunum.