Brug af pladsholdertekst i HTML5-formularer på tværs af alle browsere

I de mørke fordybninger i mit sind lurer et par JavaScript-linjer, der kun eksisterer for at fudge pladsholdertekst i ældre browsere.

Takket være pladsholderattributten på inputelementer, der er defineret i HTML5, nummereres dagene for at skulle indkøre dette kodestykke rundt.

For at se, hvordan det plejede at se ud, kaste dine øjne på dette:

For kortfattethedens skyld kondenserede jeg styling- og onfocus-funktionerne til enkeltforinger - men det er ikke mindre forfærdeligt, når det abstraheres korrekt.

Hvad der sker er, at vi sætter farven på inputens "Type her ..." -tekst til en grå farve, så får elementet fokus, farven skiftes til sort, teksten i elementet ryddes, og til sidst begivenheden fjerner sig selv.

Det er en ganske stor indsats for hvad der skal være en triviel operation.

I disse oplyste tider skal man heldigvis kun bruge følgende kode for at give et inputelement pladsholder-tekst:

Hvilket er vidunderligt og gør det, som det første stykke kode gjorde, men på en kortere og renere måde - medmindre du bruger ikke-Windows 8-versioner af Internet Explorer, men du vidste, at det var ved at komme.

I stedet for at dykke ned i verdenen af ​​browsersnugning, selv, kan vi løse Internet Explorer-situationen ved hjælp af Modernizr-biblioteket. Der er en overflod af artikler på dette websted, der omhandler Modernizr, så jeg vil ikke gå nærmere ind på, hvordan det fungerer eller indlede biblioteket, men det er tilstrækkeligt at sige, at biblioteket indlæser polyfyldninger efter behov.

Fra Modernizrs liste over polyfylder vil jeg bruge Placeholders.js, da det er et af de få, der ikke kræver jQuery, og vi har ikke brug for den ekstra vægt af jQuery til et eksempel som dette.

Vi starter med denne kode:

Ny vej:

Gammel måde:

I IE ser det ud som:

Tilføj derefter Placeholder.js til IE-kompatibilitet:

Ny vej:

Gammel måde:

Placeholders.init ();

Hvis du åbner ovenstående kode i Internet Explorer, kan du nu se, at pladsholderne opfører sig korrekt.

Nu gør vi indlæsningen af ​​Placeholder.js og dens initialisering valgfri ved at tilføje Modernizr:

Ny vej:

Gammel måde:

Modernizr.load ({

test: Modernizr.input.placeholder,

nope: 'Placeholder.js',

komplet: funktion () {Placeholders.init ();}

});

Og nu har vi oprindelig implementering, der fungerer korrekt i Firefox, IE 10 og WebKit-baserede browsere, hvor polyfilen indlæses efter behov for ældre browsere.

© Copyright 2020 | mobilegn.com