una dintre piesele mele preferate noi în HTML5 este capacitatea de a adăuga text substituent cu ușurință. Textul substituent este textul gri pe care îl găsiți într-un câmp de introducere care este folosit pentru a da un indiciu utilizatorilor cu privire la ce intrare este de așteptat în acel câmp. Odată ce utilizatorii încep să tasteze în câmpul input, acest text va dispărea.
pe vremuri, facem acest lucru în mod obișnuit cu JavaScript, după cum urmează;
nu este nimic în neregulă cu această practică, dar este mai ușor pe HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Aici este un exemplu:
<input type="text" placeholder="Placeholder Text">
Dacă avem în vedere că pe browsere, intrare ar trebui să aibă acum gri text, cum se vede mai jos;
câteva lucruri pe care ar trebui să fie remarcat: potrivit caietului de sarcini, placeholder atribut nu ar trebui să fie folosit ca o alternativă la un label și este, de asemenea, a sugerat că acest atribut ar trebui să se aplice numai input tipuri care necesită text, de exemplu, text, password, search, email, textarea și tel.
Adăugarea placeholder la input tipuri: radio și checkbox nu va face nici o diferență.
substituent & CSS
în plus, stilizarea textului substituent prin CSS este de asemenea posibil, dar la momentul acestei scrieri este încă limitată doar la browserele Firefox și Webkit.,
următorul exemplu arată cum putem schimba textul substituent de verde, atât în Webkit și Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Doar pentru a amintiți-vă, deși, ::-webkit-input-placeholder și :-moz-placeholder va afecta numai textul și nu pot fi scrise în paralel.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
această bucată de cod nu va funcționa.,
Atribut Selectorul
CSS3, de asemenea, a venit pentru a sprijini acest atribut prin introducerea selector de atribute;
input {border: 1px solid green;}
În exemplul de mai sus, vom selecta fiecare input care are placeholder atribui și de a schimba frontiera verde.,
Compatibilitate Browser
Acest nou HTML5 caracteristică normal nu este acceptată în browserele vechi, și este în prezent doar pe deplin susținută în: Firefox 4+, Safari 4+, Safari 5+, Opera 11.6 și Internet Explorer 10 (care nu a fost lansat oficial inca).
Substituent Polyfills
cu toate Acestea, dacă avem nevoie pentru a afișa substituent în browsere mai vechi, dar încă să fie capabil de a utiliza placeholder atribut, putem folosi Polyfills., Există o mulțime de Polifills substituent acolo, dar în acest exemplu vom folosi PlaceMe.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
PlaceMe.js, după cum puteți vedea din fragmentul de cod de mai sus, depinde de jQuery. Acum, dacă îl vizualizăm, de exemplu, Internet Explorer 9, toate intrările ar trebui să afișeze acum textul substituentului.
- vezi Demo
- descărcați Sursa
gândul Final
atributul substituent HTML5 face cu siguranță adăugarea textului substituent mai ușor., 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 job. Dar dacă puteți ignora pașnic browserele vechi, atunci utilizarea substituentului HTML5 este probabil o modalitate mai bună.