- Autofookuse atribuut võimaldab lehe laadimisel või dialoogiboksi avamisel automaatselt fokuseerida konkreetsele vormielemendile.
- See ühildub erinevate elementidega, sealhulgas sisendi, tekstivälja, valiku ja nuppude siltidega.
- Ainult üks element dokumendi või konteineri kohta peaks seda atribuuti kandma, et tagada brauseri käitumise prognoositavus.
- Kuigi see on kiiruse seisukohalt kasulik, tuleb selle kasutamist tasakaalustada ligipääsetavuse ja mobiilikasutaja kogemuse kaalutlustega.
Kas olete kunagi otsingumootori lehele sattunud ja märganud, et saate kohe oma päringut tippima hakata ilma otsingukasti klõpsamata? See on autofookuse atribuudi võlujõud. See on mugav väike tööriist, mis ütleb brauserile: „Kuule, pane kursor siia kohe, kui leht on valmis,“ muutes kogu suhtluse külastaja jaoks palju sujuvamaks.
Kuigi see tundub lihtne, on see midagi enamat kui lihtsalt sõna lisamine koodi. Alates mitme elemendi haldamisest kuni erinevate brauserite reaktsioonide mõistmiseni tagab selle Boole'i atribuudi üksikasjade tundmine, et te ei ärrita kogemata oma kasutajaid ega riku oma ligipääsetavuse standardeid.
Mis täpselt on autofookuse atribuut?
Oma olemuselt on autofookuse atribuut globaalne Boole'i omadus. See tähendab, et see ei vaja väärtust; selle aktiveerib lihtsalt selle lisamine elemendile. Selle peamine ülesanne on määrata algne fookus konkreetsele elemendile, kui leht laadib. Kui töötate keerukamate kasutajaliidese komponentidega, näiteks hüpikakna või <dialog> elemendiga , nihkub fookus autofookuse elemendile hetkel, mil see konkreetne aken või pealiskiht kasutajale kuvatakse.
Milliste elementidega saab seda kasutada?
Sa ei pea piirduma ainult tekstikastidega. See atribuut on üsna mitmekülgne ja töötab mitmete interaktiivsete siltide puhul:
- : Ideaalne otsinguribade või sisselogimisväljade jaoks, kuhu kasutaja peamine eesmärk on teksti sisestada.
- : Suurepärane „Võta meiega ühendust” lehtedele, kus sõnumi sisu on esmatähtis.
- : Võimaldab kasutajatel otse rippmenüüst valiku valimise juurde hüpata.
- : Kasulik teatud modaalakendes, kus peamine toimingunupp peaks olema klaviatuuril Enter vajutamiseks valmis.
Olulised reeglid ja brauseri käitumine
Üks asi, mida meeles pidada, on see, et ainult ühel elemendil dokumendi (või dialoogi/hüpikakna) kohta peaks olema autofookuse atribuut. Kui lased end kaasa haarata ja lisad selle viiele erinevale väljale, siis brauser ei paanitse, vaid keskendub lihtsalt esimesele fokuseeritavale elemendile, millega lähteteksti järjekorras kokku puutub. Siiski tuleb hoiatada, et mõned vanemad Safari versioonid tegid vastupidist, keskendudes viimasele esinemisele, kuigi tänapäevased brauserid nagu Chrome, Firefox ja Opera on sellest ajast alates esimese esinemise standardiks seadnud.
Samuti on olemas füüsiline kõrvalmõju: brauser kerib lehte automaatselt , et autofookuse element nähtavale tuua. Kui teie sisend on pika lehe allosas peidus, võib see põhjustada häiriva hüppe, mis võib külastajaid segadusse ajada. Lisaks on JavaScripti varuvariandi kasutamine fookuse haldamiseks tavaline, kuid peaksite selle käivitama DOM-valmis olekus , mitte window.load-failis, et vältida tõrkeid, kus leht hüppab pärast seda, kui kasutaja on juba kerimise alustanud.
Praktilised näited teie koodile
Selle rakendamine on imelihtne. Tavalise tekstisisestuse jaoks tuleks lihtsalt kirjutada <input autofocus type=”text”> . Kui soovite, et rippmenüü oleks etenduse staar, kasutage <select autofocus> . Nupu puhul ajab asja ära lihtne <button autofocus> . Need koodijupid tagavad, et vilkuv tekstikursor või valiku esiletõst ootab kasutajat hetkel, kui sait tema ekraanile jõuab.
Vari: millal seda vältida
Kuigi see lauaarvuti kasutajate jaoks kõlab suurepäraselt, tasub enne selle kasutamist mobiilseadmetes kaks korda järele mõelda . Paljud mobiilibrauserid, eriti WebKiti-põhised, ignoreerivad seda atribuuti sageli. Põhjus on lihtne: klaviatuuri automaatne üleslibisemine ja lehe suumimine kohe laadimise hetkel võib olla uskumatult pealetükkiv ja rikkuda sirvimiskogemuse. Üldiselt on hea rusikareegel teada oma sihtrühma ja vormi konkreetset konteksti, enne kui otsustate fookuse sundida.
Lõppkokkuvõttes on autofookuse atribuut võimas viis kasutajateekonna sujuvamaks muutmiseks , eemaldades ebavajalikud klikid, eeldusel, et seda kasutatakse säästlikult. Keskendudes ühele loogilisele elemendile ja pidades silmas mobiilikäitumist ja lehehüppeid, saate luua professionaalse liidese, mis tundub kõigile külastajatele intuitiivne ja kiire.
