Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező milyen adatot vár. A mezők fölé (alá, mellé stb…) nem lehetett szövegesen ezt kitenni.
Egy elég egyszerű kis JS-es megoldást találtunk rá, mely segítségével a mezőkben mindaddig látszódik a szöveg, amíg rá nem kattintunk, de utána természetesen eltűnik. A password típusú mező esetében is működik persze.
A javascript mindössze ennyi és a head-be kell befűzni akár külső fájlként is:
1 2 3 4 5 | <script type="text/javascript"> $().ready(function(){ $('#login_username, #login_password').placeholder(true); }); </script> |
A form esetében pedig egy placehorder-ben kell megadni, hogy mi legyen a szöveg. Az input-oknál csak arra kell figyelni, hogy a value ne legyen kitöltve és hogy az „id” megegyezzen azzal, amit a JS-ben definiáltál.
Tehát egy minta form:
1 2 3 4 | <form method="post" action="testing.php" id="test" name="test"> <input type="text" name="username" id="login_username" value="" class="ph" placeholder="Felhasználói név" /> <input type="password" name="password" id="login_password" value="" class="ph" placeholder="Felhasználói jelszó" /> </form> |
Egyben a demo oldal forráskódja:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Password Field - default text</title> <script type="text/javascript"> $().ready(function(){ $('#login_username, #login_password').placeholder(true); }); </script> <style type="text/css" media="screen"> .ph { color:#bbbbbb; } </style> </head> <body> <form method="post" action="testing.php" id="test" name="test"> <input type="text" name="username" id="login_username" value="" class="ph" placeholder="Felhasználói név" /> <input type="password" name="password" id="login_password" value="" class="ph" placeholder="Felhasználói jelszó" /> </form> </body> </html> |
… és itt van maga a demo oldal, ahol megnézhető működés közben.
Érdekes, hogy egyes böngészőkben működik, holott a jQuery nincs is beszúrva. De pont ezek a böngészők azok, amelyek támogatják a placeholder attribútumot.
Azt megköszönném ha le tudnád írni, miben nem ment, mert nálam minden alatt futott (viszont nem láttam IE alatt (osx)). Köszönöm!
Például IE7 és IE8 alatt nem jó. 6-ossal meg nincs is értelme kipróbálni :)
Jogos amit írsz, kár hogy nem néztem meg IE alatt is. :(
Most keresek vmi megoldást ,hogy azon is menjen, épp a http://plugins.jquery.com/plugin-tags/html5-placeholder-password-input -t próbáltam beüzemelni de egyelőre a password típusú mezőkre nem megy IE7 alatt.
A megoldás egyszerű: TÖRÖLNI KELL mindenki gépéről az IE-t!
Elképesztő, hogy mennyit küzdök azért, hogy ott is menjen minden hasonló egyszerű de fontos dolog.
Vajon miért nem képesek egy kicsit alkalmazkodni az igényekhez?
Valóban. A májkroszoft mintha szándékosan próbálná visszatartani a fejlődést.
Érdekes, hogy FF7 alatt sem jó.
kis korrekció :) Működik, csak nem úgy ahogy safariban.
Ebbe már jómagam is belefutottam IE alatt, igaz jQuery nélkül. A problémásabb az volt, hogy ha kitöltöm a mezőt szöveggel és ekkor a password box még sima text box volt, az IE b****tt visszaállítani, így simán látszott a beírt jelszó. Megoldás, hogy maradjon password és a js írja át. Eredmény, a jelszómező értéke „Írja be a jelszavát” lett kipöttyözve. Végül is ezt hagytam, mert ezzel ártok a legkevesebbet a felhasználónak, de a megrendelőnek kevésbé tetszett. (Ki használ ma még IE 5.5-öt?)
Nagyon hasznos kis kód.
Köszönöm, üdv!
Nekem nem igazán tetszik ez a megoldás: ha ellenőrzöd a validator.w3c.org-on, akkor a placeholder attribútum miatt invalid lesz.