Input mezők default szövege

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.

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

12 HOZZÁSZÓLÁS

  1. É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.

  2. 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!

  3. Például IE7 és IE8 alatt nem jó. 6-ossal meg nincs is értelme kipróbálni :)

  4. 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?

  5. Valóban. A májkroszoft mintha szándékosan próbálná visszatartani a fejlődést.

  6. 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?)

  7. 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.

  8. 1
    2
    3
    
    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;"

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét