O privire asupra atributului substituent HTML5
Una dintre piesele mele preferate noi în HTML5 este abilitatea de a adăuga Text de înlocuire uşor. Textul înlocuitorului este textul gri pe care îl găsiți într-un câmp de introducere care este folosit pentru a da indiciu utilizatorilor cu privire la ce intrare este așteptată în acel câmp. Odată ce utilizatorii încep să scrie în intrare câmpul, acest text va dispărea.
În vremurile vechi, facem în mod obișnuit acest lucru cu JavaScript, după cum urmează;
Nu este nimic în neregulă cu această practică, dar este mai ușor pe HTML5.
HTML5 a introdus un atribut nou cu un nume logic; înlocuitor. Iată un exemplu:
Dacă îl vedem pe browsere, intrarea ar trebui să aibă acum textul gri, după cum se vede mai jos;
Câteva lucruri care ar trebui remarcate: conform specificațiilor, înlocuitor atributul nu ar trebui să fie folosit ca o alternativă la a eticheta și se sugerează de asemenea că acest atribut trebuie aplicat numai intrare tipurile care necesită text, de ex. text, parola, căutare, e-mail, textarea și tel.
adăugare înlocuitor la intrare tipuri: radio și Caseta de bifat nu va face nici o diferență.
Placeholder & CSS
Mai mult decât atât, este posibilă și stylingul textului cu substituent prin CSS, dar la momentul acestei scrieri este încă limitat doar la browserele Firefox și Webkit.
Exemplul următor arată modul în care schimbăm textul de substituent în verde atât în Webkit, cât și în Firefox;
input :: - webkit-input-placeholder culoare: verde; input: -moz-placeholder culoare: verde;
Doar să vă amintiți, totuși :: - webkit-input-substituent și : -Moz-substituent va afecta numai textul și nu poate fi scris în paralel.
input :: - webkit-input-placeholder, introducere: -moz-placeholder culoare: verde;
Această bucată de cod nu va funcționa.
Selector de atribute
CSS3 a venit, de asemenea, pentru a susține acest atribut introducând [Substituent] selectorul de atribute;
intrare [placeholder] margine: 1px solid verde;
În exemplul de mai sus, selectăm fiecare intrare care are înlocuitor atribuiți și modificați marginea verde.
Compatibilitatea browserului
Această nouă caracteristică HTML5, în mod surprinzător, nu este acceptată în browserele vechi și este în prezent acceptată pe deplin numai în: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 și Internet Explorer 10 (care încă nu a fost lansat oficial).
Reprezentanți polifolii
Cu toate acestea, dacă trebuie să afișăm substituentul în browserele mai vechi, dar să reușim să îl folosim înlocuitor atribut, putem folosi Polyfills. Există multe Reprezentanți polifolii acolo, dar în acest exemplu vom folosi PlaceMe.js;
PlaceMe.js, după cum puteți vedea din fragmentul de cod de mai sus, depinde de jQuery. Acum, dacă îl vedem, de exemplu, în Internet Explorer 9, toate intrările ar trebui să afișeze acum textul substituentului.
- Vizualizați demonstrația
- Descărcați sursa
Gândirea finală
Substituent HTML5 atributul face cu ușurință adăugarea textului înlocuitor. Acum, depinde de noi, dezvoltatorii web și designerii, să alegem ce metodă să folosim: JavaScript sau HTML5.
Dacă considerați că utilizarea Polyfills și jQuery pentru a sprijini browserele vechi este redundantă, atunci JavaScript este aparent mai potrivit pentru această lucrare. Dar dacă puteți să ignorați în mod pașnic vechile browsere, folosirea locației HTML5 este probabil o modalitate mai bună.
