A Pažvelkite į HTML5 Placeholder atributą
Vienas iš mano mėgstamiausių HTML5 kūrinių - tai galimybė pridėti Vietos teksto tekstas lengvai. Vietos žymeklio tekstas yra pilkas tekstas, kurį rasite įvesties lauke, kuriuo naudotojams pateikiamas užuomina apie tai, kokių įėjimų laukiama toje srityje. Kai vartotojai pradeda rašyti įvesties lauke, šis tekstas išnyks.
Senais laikais tai darome su „JavaScript“, taip:
Nėra nieko blogo dėl šios praktikos, bet HTML5 yra lengviau.
HTML5 pristatė naują atributą su loginiu pavadinimu; vietos žymeklis. Štai pavyzdys:
Jei peržiūrėsime ją naršyklėse, įvesties dabar turėtų būti pilkas tekstas, kaip matoma toliau;
Keli dalykai, kuriuos reikia pažymėti: pagal specifikaciją vietos žymeklis atributas neturėtų būti naudojamas kaip alternatyva a etiketėje taip pat siūloma, kad šis atributas būtų taikomas tik įvesties tipai, kuriems reikia teksto, pvz. tekstą, Slaptažodis, Paieška, el, textarea ir tel.
Pridedant vietos žymeklis į įvesties tipai: radijo ir žymimasis langelis nebus jokio skirtumo.
Vietos ir CSS
Be to, taip pat įmanoma keisti vietos žymeklio tekstą per CSS, tačiau šio rašymo metu ji dar apsiriboja tik „Firefox“ ir „Webkit“ naršyklėmis.
Toliau pateiktame pavyzdyje parodyta, kaip keičiame vietos žymeklio tekstą į „žalias“ ir „Webkit“, ir „Firefox“;
input :: - webkit-input-placeholder spalva: žalia; įvestis: -moz-placeholder spalva: žalia;
Tiesiog prisiminkite, kad :: - webkit-input-placeholder ir : -moz-placeholder paveiks tik tekstą ir negali būti parašyta lygiagrečiai.
input :: - webkit-input-placeholder, įvestis: -moz-placeholder color: green;
Šis kodo gabalas neveiks.
Atributo parinkėjas
CSS3 taip pat atėjo remti šį atributą įvedant [placeholder] atributo selektorius;
įvestis [placeholder] border: 1px kieta žalia;
Pirmiau pateiktame pavyzdyje mes pasirenkame kiekvieną įvesties tai turi vietos žymeklis atributas ir pakeiskite sieną į žalią.
Naršyklės suderinamumas
Ši nauja HTML5 funkcija nenuostabu, kad ji nepalaikoma senose naršyklėse ir šiuo metu yra visiškai palaikoma: „Firefox 4+“, „Chrome 4+“, „Safari 5+“, „Opera“ 11.6 ir „Internet Explorer 10“ (kuri dar nebuvo oficialiai išleista).
Lankytojo polifilai
Nepaisant to, jei reikia rodyti vietos žymeklį senesnėse naršyklėse, bet vis tiek galime naudoti vietos žymeklis atributas, galime naudoti „Polyfills“. Yra daug Lankytojo polifilai ten, bet šiame pavyzdyje mes naudosime „PlaceMe.js“;
„PlaceMe.js“, kaip matote iš pirmiau pateikto kodo fragmento, priklauso nuo „jQuery“. Dabar, jei peržiūrėsime jį, pavyzdžiui, „Internet Explorer 9“, visi įvesties duomenys turėtų rodyti vietos žymeklio tekstą.
- Peržiūrėti demonstraciją
- Atsisiųsti šaltinį
Galutinė mintis
The HTML5 vietovė atributas neabejotinai palengvina vietos žymeklio tekstą. Dabar mes, žiniatinklio kūrėjai ir dizaineriai, turi pasirinkti, kurį metodą naudoti: „JavaScript“ arba „HTML5“.
Jei manote, kad „Polyfills“ ir „jQuery“ naudojimas senosioms naršyklėms palaikyti yra nereikalingas, „JavaScript“, atrodo, labiau tinka darbui. Bet jei jūs galite ramiai ignoruoti senas naršykles, tuomet naudojant HTML5 Placeholder tikriausiai yra geresnis būdas.
