Pogledajte u HTML5 Atribut rezerviranog mjesta
Jedna od mojih omiljenih novih dijelova u HTML5 je mogućnost dodavanja Tekst rezerviranog mjesta lako. Tekst rezerviranog mjesta je sivi tekst koji nalazite u polju za unos koji se koristi za davanje savjeta korisnicima o tome koji se unos očekuje u tom polju. Kada korisnici počnu upisivati u ulazni polje, ovaj tekst će nestati.
U starim vremenima to obično radimo s JavaScriptom, kako slijedi;
Ne postoji ništa loše u ovoj praksi, ali je lakše u HTML5.
HTML5 je uveo novi atribut s logičnim nazivom; rezerviranog mjesta. Evo primjera:
Ako ga pogledamo na preglednicima, unos bi sada trebao imati sivi tekst, kao što se vidi dolje;
Nekoliko stvari koje treba zapaziti: prema specifikaciji, rezerviranog mjesta atribut ne smije se koristiti kao alternativa označiti Također se predlaže da se ovaj atribut primjenjuje samo na ulazni vrste koje zahtijevaju tekst, npr. tekst, zaporka, traži, e, podruÄŤje i tel.
Dodavanje rezerviranog mjesta prema ulazni vrste: radio i okvir neće napraviti nikakvu razliku.
Placeholder & CSS
Nadalje, stiliziranje teksta rezerviranog mjesta preko CSS-a je također moguće, ali u vrijeme pisanja ovog teksta još uvijek je ograničeno samo na preglednike preglednika Firefox i Webkit.
Sljedeći primjer pokazuje kako mijenjamo tekst rezerviranog mjesta u zeleni u Webkit i Firefoxu;
input :: - webkit-input-placeholder boja: zelena; ulaz: -moz-placeholder boja: zelena;
Samo da zapamtim :: - WebKit-ulaz-rezervirano i : -Moz-rezerviranog će utjecati samo na tekst i ne može se pisati paralelno.
input :: - webkit-input-placeholder, ulaz: -moz-placeholder boja: zelena;
Ovaj dio koda neće raditi.
Odabir atributa
CSS3 je također došao podržati ovaj atribut uvođenjem [rezerviranog mjesta] izbornik atributa;
input [placeholder] border: 1px zeleno;
U gornjem primjeru odabiremo svaki ulazni koji ima rezerviranog mjesta i promijenite granicu u zelenu.
Kompatibilnost preglednika
Ova nova značajka HTML5 nije iznenađujuće podržana u starim preglednicima i trenutno je u potpunosti podržana u: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 i Internet Explorer 10 (koji još nije službeno objavljen).
Placeholder Polyfills
Ipak, ako trebamo prikazati rezervirano mjesto u starijim preglednicima, ali ipak moći koristiti rezerviranog mjesta atribut, možemo koristiti Polyfills. Postoji mnogo Placeholder Polyfills tamo, ali u ovom primjeru koristit ćemo PlaceMe.js;
PlaceMe.js, kao što možete vidjeti u gornjem isječku koda, ovisi o jQuery. Sada, ako ga pogledamo, na primjer, Internet Explorer 9 svi unosi bi sada trebali prikazati tekst rezerviranog mjesta.
- Prikaži demo
- Preuzimanje izvora
Konačna misao
HTML5 oznaka mjesta atribut svakako olakšava dodavanje teksta rezerviranog mjesta. Sada je na nama, web-programerima i dizajnerima, da odaberemo metodu koju ćemo koristiti: JavaScript ili HTML5.
Ako smatrate da je korištenje Polyfills i jQuery za podršku starim preglednicima suvišno, onda je JavaScript očito prikladniji za taj posao. Ali ako možete mirno ignorirati stare preglednike, onda je upotreba HTML5 Placeholder vjerojatno bolji način.
