A Nézze meg a HTML5 Placeholder attribútumot

A HTML5 egyik kedvenc újdonsága az, hogy hozzáadhatok Helyőrző szöveg könnyen. A helyőrző szöveg egy olyan szürke szöveg, amelyet egy olyan beviteli mezőben talál, amely arra utal, hogy egy tippet ad a felhasználóknak arról, hogy milyen bemenetet várnak el ezen a területen. Miután a felhasználók elkezdenek beírni a bemenet mező, ez a szöveg eltűnik.

A régi időkben ezt általában csináljuk JavaScript használatával, alábbiak szerint;

Nincs semmi baj ezzel a gyakorlattal, de könnyebb a HTML5-ben.

A HTML5 egy új, logikai nevű attribútumot vezetett be; helykitöltő. Íme egy példa:

Ha megnézzük a böngészőkön, akkor a bemenetnek most már a szürke szövegnek kell lennie, ahogy az alább látható;

Néhány dolog, amit meg kell jegyezni: a specifikációnak megfelelően helykitöltő az attribútumot nem szabad alternatívaként használni az a címke és azt is javasoljuk, hogy ezt az attribútumot csak az bemenet szövegeket igénylő típusok, pl. szöveg, Jelszó, keresés, email, textarea és tel.

hozzáadása helykitöltő hoz bemenet típusok: rádió és négyzetet nem fog különbséget tenni.

Helyőrző és CSS

Továbbá lehetséges a helyőrző szövegének CSS-en keresztüli kialakítása is, de az írás idején még csak a Firefox és a Webkit böngészőkre korlátozódik..

A következő példa bemutatja, hogyan változtatjuk a helyőrző szöveget zöldre mind a Webkit, mind a Firefox alkalmazásban;

 input :: - webkit-input-placeholder szín: zöld;  bemenet: -moz-placeholder szín: zöld;  

Csak emlékszem, de :: - WebKit-input-helykitöltő és : -Moz-helykitöltő csak a szöveget érinti, és nem lehet párhuzamosan írni.

 input :: - webkit-input-helyőrző, bemenet: -moz-placeholder color: green;  

Ez a kód nem fog működni.

Attribútumválasztó

A CSS3 is támogatta ezt az attribútumot a [helykitöltő] attribútumválasztó;

 bemenet [helyőrző] border: 1px szilárd zöld;  

A fenti példában minden lehetőséget választunk bemenet ez az helykitöltő attribútum és a határ zöldre vált.

Böngésző kompatibilitás

Ez az új HTML5-szolgáltatás nem meglepő módon nem támogatott a régi böngészőkben, és jelenleg csak a következő szolgáltatásokat támogatja: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 és Internet Explorer 10 (amely még nem hivatalosan megjelent).

Placeholder Polyfills

Mindazonáltal, ha a helyőrzőt régebbi böngészőkben kell megjelenítenünk, de mégis képesnek kell lennünk használni a helykitöltő attribútum, használhatjuk a Polyfills-et. Van egy csomó Placeholder Polyfills ott, de ebben a példában a PlaceMe.js-t fogjuk használni;

A PlaceMe.js, ahogy a fenti kódrészletből látható, a jQuery függvénye. Most, ha megnézzük, például az Internet Explorer 9-ben, az összes bemenetnek meg kell jelenítenie a helyőrző szöveget.

• Demó megtekintése
• Letöltés forrása

Végső gondolat

A HTML5 helyőrző Az attribútum minden bizonnyal megkönnyíti a helyőrző szövegének hozzáadását. Most rajtunk múlik, webes fejlesztők és tervezők, hogy melyik módszert használjuk: JavaScript vagy HTML5.

Ha úgy gondolja, hogy a régi böngészők támogatásához a Polyfills és a jQuery használata felesleges, akkor a JavaScript nyilvánvalóan jobban megfelel a feladatnak. De ha békésen figyelmen kívül hagyhatja a régi böngészőket, akkor a HTML5 Placeholder használata valószínűleg jobb módja.