Trükkös input css segítségével

Szerző: admin | CSS | 2010 szeptember 6. 07:24

A bemutatott módszer segítségével növelheted az oldaladon a felhasználói élményt. A sima input mezőt fogjuk kicsit felturbózni css segítségével.

Ez a módszer akkor hasznos, ha például a felhasználó egy oldalon tudja megtekinteni és szerkeszteni a profilját. Ezt általában szét szoktuk bontani két részre, mivel input mezőben sokkal nehezebb végigpásztázni az adatokat.

A végeredmény a fenti képen látható. Az adatok szépen kiiratva, mellettük ceruza jelzi, hogy ha oda kattintunk, akkor szerkeszthető az adott sor. Kattintásra a kép eltűnik, az input mező pedig előjön.

A trükk mindössze annyi, hogy eleve input mezőben vannak az adatok, csak levettem róla a bordert és kicsit hihetőbbé formáztam az egészet. Ha belekattintunk az inputba, vagyis rá kerül a focus, ismét kap bordert és a ceruza is eltűnik.

Az egyetlen probléma azzal van, hogy ie7 nem támogatja a focus-t, így kénytelenek vagyunk egy kis jQuery-t is beletenni, ha teljes körű böngésző támogatást szeretnénk elérni.

HTML

Itt semmi boszorkányság nincs, egy sima form ahol bejelenthetjük, hogy a házunkban milyen kártevő ólálkodik.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

<form id="" action="/" method="post" class="editable">
 
    <fieldset>
        <legend>Kártevő adatlap</legend>
 
        <div>
            <label for="name">Kártevő neve</label>
            <input name="name" id="name" size="30" class="field" type="text" value="Szárnyas patkány" />
        </div>
 
        <div>
            <label for="size">Mérete</label>
            <input name="size" id="size" size="30" class="field" type="text" value="Bagoly nagyságú" />
        </div>
 
        <div>
            <label for="damage">Okozott kár</label>
            <input name="damage" id="damage" size="30" class="field" type="text" value="Leveri a vázákat, összeszarja a házat" />
        </div>
 
        <div>
            <label for="picture">Kép</label>
            <input name="picture" id="picture" size="30" class="field" type="text" value="http://retron.hawara.com/pics3/chim_rat.jpg" />
        </div>
    </fieldset>
 
</form>

CSS

Alapjáraton levesszük az input mezőkről a bordert, háttérnek balra igazítva megadunk egy ceruzát, a szöveget balról paddingoljuk, hogy ne lógjon rá a ceruzára.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

.editable .field{
	border:none;
	background:transparent url(/img/examples/trukkos_input_css/edit.png) no-repeat 0 50%;
	padding:7px 0 7px 20px;
	width:300px;
	line-height:1em;
	margin:0;
	font-weight:bold;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 1s ease;
}

Ha a fókusz rákerült az adott inputra, eltüntetjük a ceruzát, megjelenítjük a bordert, és a paddingot is csökkentjük, így szerintem még jobb hatása van az egésznek.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

.editable .field:focus, .editable .focused{
	border:2px solid #dfdfdf;
	padding:5px;
	background:none;
	width:300px;
	line-height:1em;
	margin:0;
	outline:none;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 1s ease;
}

Mind a két helyre betettem egy transitiont, ami nem feltétlenül szükséges sőt… Ez az a CSS3 dolog ami két formázás közötti átmenetet folytonossá tesz, olyan mintha egyikből a másikba átúszna a formázás. Chromeban megtekinthető hogy néz ki, embere válogatja, hogy így jobb e, vagy ha csak simán átváltozik.

jQuery

Mivel ie7 nem támogatja, kénytelenek vagyunk egy focused osztályt kapcsolni az inputhoz ha rákattintunk, illetve levenni róla azt ha kikattintunk belőle.

1.
2.
3.
4.
5.
6.
7.

$(document).ready(function(){
	$('.editable .field').focus(function() {
		$(this).addClass('focused');
	}).blur(function(){
		$(this).removeClass('focused');
	});
});

A blur fel van fűzve egy esemény láncra, így rövidebb a kód, de az érthetőség kedvéért így is írhattam volna:

1.
2.
3.
4.
5.
6.
7.
8.

$(document).ready(function(){
	$('.editable .field').focus(function() {
		$(this).addClass('focused');
	});
    $('.editable .field').blur(function(){
		$(this).removeClass('focused');
	});
});

Összegzés

Érdemes megfontolni a használatát, ugyanis kellemes felhasználói élményt nyújthat. Egyetlen hátránya, hogy ha túlfolyik a szöveg az input méretén, akkor nem fog sort törni. Érdemes a maxlength értékét beállítani ilyenkor.

• Példa
• Letöltés