HTML5 placeholder cross-browser podpora

Mnogi izmed vas verjetno že veste kakšno vlogo ima html5 placeholder funkcija, katero lahko uporabimo v značkah <input>. Za tiste, ki morda še ne veste, to je funkcija katero lahko uporabimo naprimer pri kontaktnih obrazcih, obrazcih za registracijo, pri obrazcih za prijavo itd. kot namig pri vnosu podatkov namesto, da bi uporabili <label> značke, kajti sama placeholder funkcija poskrbi, da se v <input> znački pojavi vnaprej določeno besedilo. Verjetno se sedaj že sprašujete kakšna je korist od te funkcije. Ja koristno je vsekakor to, da na strani ne rabimo več pisat pred vsako <input> značko še dodatnih značk – <label>, ampak preprosto to vrednost vpišemo v placeholder. Pa najboljše, da si to ogledamo kar na primeru.

Najprej je še potrebno omeniti, da je mogoče placeholder funkcijo uporabiti na naslednjih tipih input značk:

  • tekst,
  • iskanje,
  • url,
  • telefon,
  • email,
  • in geslo.

Namesto, da ustvarimo formo na način kot je prikazan na spodnjem primeru:

enostavno to naredimo s placeholder funkcijo:

Ampak, da ne bo vse tako lepo kot izgleda, pa se pojavi težava pri cross-browser podpori, saj starejši brskalniki le-te funkcije ne podpirajo – npr. IE (Internet Explorer) podpira od verzije 10 naprej, zato je potrebno nekako “vsiliti” podporo te funkcije starejšim brskalnikom.

Sam uporabljam jquery plugin, katerega lahko najdete na GitHub v repozitoriju jQuery Placeholder, in kar je najboljše pri tem plugini je to, da ima cross-browser podporo, tudi za IE6 – v kolikor imate starejšo ciljno publiko je to dobra novica, saj je še veliko uporabnikov, kateri uporabljajo za brskanje po spletu IE6.

Potem ko si prenesete jQuery placeholder iz github-a je vse kar je potrebno storiti za cross-browser podporo le še to, da pokličemo javascript datoteko in funkcijo ter določimo input-e za katere želimo da je omogočena podpora za placeholder. Vse to je zelo enostavno za storiti, tako da “stari mački” s tem ne bi smeli imeti nobenih težav 😉

In sedaj ko smo to storili je omogočena cross-browser podpora za placeholder tudi v starejših brskalnikih. V kolikor želite preveri delovanje npr. v Internet Explorer-ju pritisnite F12 tipko, ki odpre orodja za razvijalce, in spremenite “Način brskalnika IE” na poljubno verzijo.