În HTML5 pentru a implementa acest lucru, există un atribut placeholder excelent. care stabilește textul de indiciu în interiorul elementelor de intrare.
Este scrisă după cum urmează:
Textul specificat cu substituentul. dispare automat când primiți focalizare cu acest câmp de intrare. Dar, din păcate, nu toate browserele înțeleg acest atribut. Prin urmare, pentru ca placeholderul să fie browser încrucișat, trebuie să utilizați pluginuri speciale scrise în jQuery.
Unul dintre aceste plug-in-uri va fi discutat în acest articol. Și ce putem face la ieșire, puteți vedea făcând clic pe butonul "Demo demo".
Pasul 1 - Creați un formular HTML
În primul rând, am creat forma obișnuită, cu exemplul căruia vom dezasambla lucrările acestui plugin. Rețineți că substituentul poate fi setat nu numai pentru câmpurile de introducere a textului, ci și pentru câmpurile de introducere a parolelor, câmpurile de text etc.
Pasul 2 - Conectați pluginul jQuery Placeholder
În continuare avem nevoie pentru a conecta jQuery real și plugin jQuery în sine biblioteca Substitut (le puteți descărca de alte materiale, acestea sunt în dosarul js).
Pasul 3 - Inițializați pluginul
Acum, pentru ca totul să funcționeze pentru noi, inițializăm pluginul plug-in:
Dacă ați făcut totul corect, browserele mai vechi, precum și cele moderne, vor începe să înțeleagă atributul de substituent.
Setarea stilurilor pentru substituent utilizând CSS
Implicit, textul specificat cu atributul substituent este afișat în gri. Dar dacă brusc trebuie să schimbați acest lucru, atunci pentru fiecare browser trebuie să aplicați abordarea dvs.
De exemplu, browserele Chrome și Safari utilizează pseudo-class :: - webkit-input-placeholder. pentru Firefox 18 și versiunile anterioare: -moz-placeholder. și Firefox 19+ utilizează un alt pseudo-clasă :: - moz-placeholder. bine pentru IE10 -: -ms-input-placeholder.
Pentru browserele mai vechi, pluginul stabilește automat clasa de substituent în textul de înlocuire și astfel puteți controla cu ușurință aspectul acestuia.
Asta înseamnă că stilurile CSS pot arăta astfel:
Rețineți că regulile pentru fiecare dintre clasele pseudo-clase sunt specificate separat, deoarece nu le puteți grupa.
Și un alt lucru pe care am vrut să-l notez la final, este o problemă cu browser-ul Opera 11. Pentru că în el nu putem stiliza substituentul. deoarece în acest browser nu există pur și simplu o pseudo-clasă potrivită.
Trimiteți-le prietenilor: