A Aplūkojiet HTML5 Placeholder atribūtu
Viens no maniem iecienītākajiem HTML5 gabaliem ir spēja pievienot Vietas teksts viegli. Vietas vārda teksts ir pelēks teksts, ko atradīsiet ievades laukā, kas tiek izmantots, lai sniegtu ieteikumu lietotājiem par to, kādu ievadi šajā laukā ir paredzēts. Kad lietotāji sāk rakstīt ievadi lauks, šis teksts pazudīs.
Vecajās dienās mēs to parasti darām ar JavaScript, sekojoši;
Nav nekas nepareizs ar šo praksi, bet HTML5 ir vieglāk.
HTML5 ieviesa jaunu atribūtu ar loģisku nosaukumu; vietas rezervētājs. Šeit ir piemērs:
Ja mēs to aplūkosim pārlūkprogrammās, ieejai tagad ir jābūt pelēkajam tekstam, kā redzams zemāk;
Dažas lietas, kas jānorāda: saskaņā ar specifikāciju vietas rezervētājs atribūtu nevajadzētu izmantot kā alternatīvu a marķējums un ir arī ierosināts, ka šis atribūts jāpiemēro tikai ievadi veidiem, kuriem ir nepieciešams teksts, piemēram,. tekstu, parole, Meklēt, e-pastu, textarea un tel.
Pievienošana vietas rezervētājs uz ievadi veidi: radio un izvēles rūtiņu nekādas atšķirības.
Placeholder & CSS
Turklāt ir iespējama arī vietas rezervētāja teksta veidošana, izmantojot CSS, bet šī rakstīšanas laikā tā joprojām attiecas tikai uz Firefox un Webkit pārlūkprogrammām.
Nākamajā piemērā parādīts, kā mainām vietas marķiera tekstu uz zaļo gan Webkit, gan Firefox;
input :: - webkit-input-placeholder krāsa: zaļa; ievade: -moz-placeholder krāsa: zaļa;
Tikai atcerēties, lai gan :: - webkit-input-placeholder un : -moz-placeholder ietekmēs tikai tekstu un to nevar rakstīt paralēli.
input :: - webkit-input-placeholder, ievade: -moz-placeholder krāsa: zaļa;
Šis kods nedarbosies.
Atribūtu atlasītājs
CSS3 arī nāca, lai atbalstītu šo atribūtu, ieviešot [placeholder] atribūtu selektors;
ievade [placeholder] border: 1px cieta zaļa;
Iepriekš minētajā piemērā mēs izvēlamies katru ievadi tas ir vietas rezervētājs atribūtu un nomainiet robežu uz zaļu.
Pārlūka saderība
Šī jaunā HTML5 funkcija nav pārsteidzoši atbalstīta vecajās pārlūkprogrammās, un pašlaik tā ir pilnībā atbalstīta: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 un Internet Explorer 10 (kas vēl nav oficiāli izlaists).
Placeholder Polyfills
Neskatoties uz to, ja mums ir jāparādās vietrādim vecākajās pārlūkprogrammās, bet joprojām varēsim to izmantot vietas rezervētājs atribūtu, mēs varam izmantot Polyfills. Tur ir daudz Placeholder Polyfills tur, bet šajā piemērā mēs izmantosim PlaceMe.js;
PlaceMe.js, kā redzams no iepriekš minētā koda fragmenta, tas ir atkarīgs no jQuery. Tagad, ja mēs to aplūkosim, piemēram, Internet Explorer 9, visiem ievades failiem tagad ir jānorāda vietas rezervētāja teksts.
- Skatīt demonstrāciju
- Lejupielādēt avotu
Galīgā doma
The HTML5 vietas apzīmētājs atribūts, protams, atvieglo vietnes teksta pievienošanu. Tagad mums, tīmekļa izstrādātājiem un dizaineriem ir jāizvēlas, kādu metodi izmantot: JavaScript vai HTML5.
Ja uzskatāt, ka, lietojot Polyfills un jQuery, lai atbalstītu vecās pārlūkprogrammas, ir lieks, tad JavaScript, šķiet, ir vairāk piemērots darbam. Bet, ja jūs varat mierīgi ignorēt vecās pārlūkprogrammas, tad, izmantojot HTML5 Placeholder, iespējams, ir labāks veids.
