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:
<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:
<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:
<!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.
Harder
Profil
Korábbi hozzászólások (12)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
É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.
input type="text" name="mail" id="mail" value="Email-cím*:"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat