Lær hvordan du kan bruke HTML 5 autofokusinndataattributtet

Et annet av de kule og fantastiske HTML5-bidragene inkluderer innføringsattributtet autofokus. Dette er bare ett eksempel på flere inndatatyper som lar oss autofokusere på elementer ved sideinnlasting ved å bruke HTML5 autofokusattributtet. Denne oppgaven ble tidligere utført med JavaScript, JQuery og Flash, og fungerer ganske likt å forme validering; Imidlertid blir dette nå tilgjengelig ved hjelp av HTML5. Jeg tilbyr også en nettleserstøtte og matematikk for inndatatyper for å sortere ut de forskjellige implementeringshindringene mellom brukeragentene og inndatatypene.

Den sentrale definisjonen av autofokus som gitt av WHATWG sier: "Innholdsattributtet autofokus lar nettutvikleren indikere at en bestemt kontroll skal fokuseres på så snart siden er lastet inn, eller så snart dialogen som den befinner seg i vises, slik at brukeren bare kan begynne å skrive uten å måtte fokusere hovedkontrollen manuelt ".

Nettleserstøtte

Jeg vet at det første spørsmålet ditt kommer til å være hva nettlesere som for øyeblikket støtter HTML5 autofokus-attributtet? Det støttes for øyeblikket av følgende nettlesere og brukeragenter som rapportert av Wufoo i deres "The Current State of HTML5 Forms", Autofocus Attribute. Wufoos nettsted gir også flere gode tips for å implementere attributtet:

Nettleser

Chrome

Firefox

DVS

Opera

Safari

Versjon

6+

4+

10

11+

5+

Brukerstøtte

støttet

støttet

støttet

støttet

støttet

Inngangstyper

Å sortere ut de forskjellige inngangstypene blir en granulær tilnærming til å finne hvilken nettleser som støtter hver type inngang for HTML5 autofokusattributtet. Ved å bruke Michael Taylors HTML5 input attributt kjernetester i nettleseren din (se figur A nedenfor), kan kjernetesten bestemme nettleserens støtte for HTML5-inngangene og attributtstøtten. Hans kjernetest viser ikke bare resultater for autofokus, men den gir også testing mot andre HTML5-innganger og attributtstøtte, inkludert autofullføring, liste, makslengde, mønster, plassholder, readonly, påkrevd og størrelse.

Figur A

Klikk for å forstørre.
Basert på Michaels kjernetest for HTML5-inputattributtet, bekreftet jeg flere nettlesere som er installert på min PC, så vel som flere nettlesere fra Adobe BrowserLab Browser Sets Test, og opprettet denne matrisen for å vise de spesifikke inngangstypene sortert etter nettleser som vist i figur B nedenfor:

Figur B

Klikk for å forstørre.
Dessverre klarte jeg ikke å teste IE 10, så jeg har ikke de inngangstypene som passerer / ikke klarer å vise for den i matrisen. Imidlertid opprettet og testet jeg et eksempel på en demo-indeks.htm-fil i IE8 og bekreftet at HTML5 autofokus ikke fungerer som vist i figur C nedenfor:

Figur C

Samme eksempel demo index.htm fil vist i Chrome 22.0.1 er vist i figur D :

Som du kan se fra skjermbildet i Chrome, er autofokusen på det siste elementet, og plassholderne viser på de andre eksemplene nedenfor. Vær oppmerksom på at siden det er flere forekomster av autofokus på denne spesielle demosiden, at den siste uten plassering er fokuset på sidebelastning, vil du som regel bare ha en autofokus per webside-dokument. Eksemplene som vises ovenfor inkluderer følgende kodebiter fra demo index.htm-filen:

 Hei Verden!
 Eksemplet html- og CSS-filer er tilgjengelige for nedlasting.	
						
							
						

© Copyright 2021 | pepebotifarra.com