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.

Kapcsolódó bejegyzések:
  • Weblapkészítés során ha egy olyan oldalt kell készíteni, hol egy vagy akár több input mező is van (regisztráció, kapcsolatfelvétel stb..), hasznos lehet megadni, …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • A paraméter átadásnak egyszerű html-ből 3 ismert módja a sütik, a GET és a POST. Mind a 3 megoldásnak megvannak az előnyei és hátrányai. Nézzük sorra.SÜTIK …

  • Néha jól jön, hogy egy lapon egyes tartalmakat alapértelmezetten el lehet rejteni a szemek elől (helyspórolás, átláthatóság stb..), persze nem véglegesen, csak á …

A cikket beküldte: Harder (http://blog.harder.hu)

12 hozzászólás

  1. tomi6230i says:

    É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. Harder says:

    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. krabicsek says:

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

  4. Harder says:

    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.

  5. Ricsi Bohóc says:

    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?

  6. Jancsí says:

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

  7. alb says:

    Érdekes, hogy FF7 alatt sem jó.

  8. alb says:

    kis korrekció :) Működik, csak nem úgy ahogy safariban.

  9. o0ONeoNO0o says:

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

  10. Barnabás says:

    Nagyon hasznos kis kód.

    Köszönöm, üdv!

  11. H.Z. says:

    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.

  12. 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;"

Szólj hozzá
a Input mezők default szövege c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>