AlejTech/Blog/Predvyplnené formulárové polia - ako naplniť alebo vyčistiť textbox pomocou jQuery
Prejsť na navigáciu

Predvyplnené formulárové polia - ako naplniť alebo vyčistiť textbox pomocou jQuery

Predvyplnené formulárové polia - ako naplniť alebo vyčistiť textbox pomocou jQuery

V tomto jednoduchom tipe ukážeme ako pomocou Javascriptu a jQuery „vyčistiť“ textbox (teda formulárové pole) po kliknutí, prípadne ho znova naplniť textom, ak do neho používateľ nič nenapíše.

Táto funkcia je výhodná pre obe strany – tvorcu stránky, ktorý potrebuje zbierať presné dáta, aj návštevníka, ktorého práca s poľami sa zjednoduší. Predvyplnený textbox vyzýva návštevníka k akcii lepšie ako prázdny. Pomocou predvyplneného poľa môžeme tiež používateľovi ukázať správny formát vstupných údajov. Ak používateľ vie, čo má robiť, to nikdy nie je na škodu :).

Príklad použitia predvyplneného poľa si môžete pozrieť pod týmto článkom v päte stránky vpravo dolu v Prihlasovaní do newslettera AlejTech.

Ďalšiu ukážku tejto funkcie si môžete prezrieť v prihlasovaní do newslettera na stránke ano.sk, ktorú sme redizajnovali. 

Potrebné jQuery funkcie

Hlavnú funkcionalitu zabezpečujú jQuery funkcie focus() (funkcia prebehne po aktivovaní textboxu pri editácií) a blur() (naopak, táto funkcia sa spustí pri opustení položky).

Funckia val() sa stará o manipuláciu s obsahom. Ak ju zavoláme bez argumentu, vráti hodnotu v textboxe. Ak do nej vložíme reťazec, nastaví novú hodnotu.

Funkcie na manipuláciu s triedami addClass() a removeClass() sú voliteľným bonusom. Pre jednoduché rozlíšenie vyplnenej položky od nevyplnenej môžeme upravovať vzhľad pomocou CSS.

$(function(){

	var textboxdefault = $('#textbox').val();
	
	$('#textbox').addClass('textbox-default').focus(function(){
		if( $(this).val() == textboxdefault ){
			$(this).val('').removeClass('textbox-default');
		}
	}).blur(function(){
		if( $(this).val() == '' ){
			$(this).val(textboxdefault).addClass('textbox-default');
		}
	});
	
});

Naplnenie poľa obsahom

V predchádzajúcom príklade sme po aktivovaní položku vyčistili úplne. Ak by sme chceli namiesto toho vložiť nejakú predvyplnenú hodnotu, stačí trocha upraviť kód. Tento príklad je typický napríklad keď chceme, aby používateľ vyplnil e-mailovú adresu. Vtedy je výhodné pri začatí písania predvyplniť zavináč.

$(function(){

	var textboxdefault = $('#textbox').val();
	var textboxnew = '@';
	
	$('#textbox').addClass('textbox-default').focus(function(){
		if( $(this).val() == textboxdefault ){
			$(this).val(textboxnew).removeClass('textbox-default');
		}
	}).blur(function(){
		if( ( $(this).val() == '' ) || ( $(this).val() == textboxnew ) ){
			$(this).val(textboxdefault).addClass('textbox-default');
		}
	});
	
});

Oba príklady predpokladajú, že textbox má pri načítaní stránky predvyplnenú už nejakú hodnotu už v HTML. Ak by sme chceli mať pri vypnutom Javascripte položky prázdne, je možné vyplniť hotnoty priamo v Javascript kóde. Univerzálnejšie riešenie je uložiť hodnoty do HTML, napríklad do atribútu title v input elemente, a potom ich načítať pomocou attr() funkcie.

Myslite na používateľa

Predvyplnené polia sú nenahraditeľnou pomôckou pre používateľsky príjemný dizajn webových formulárov. Najjednoduchším príkladom je časté vypĺňanie dátumov (narodenia, rezervácie pobytu a podobne) do textového poľa v nezáväzných rezervačných formulároch. V prípade dátumov sa obzvlášť oplatí poskytnúť používateľovi predvyplnený formát dátumu, inak môže dôjsť k nedorozumeniam. Veľkou pomôckou môžu byť predvyplnené nápovedy aj pri rozšírenom vyhľadávaní alebo filtrovaní obsahu.

Výsledkom je šťastný používateľ, ktorému poskytneme všetky možné pomôcky k tomu, aby zdarne vyplnil formulár až do konca. :)

Tento článok zahŕňa témy:
javascript, jQuery, input, textbox, focus, blur, pole, formulár, textové pole, formulárové pole, textarea, predvyplniť, vymazať

Komentáre (1)

pridať komentár


V komentároch môžete používať BB kód .

Komentár č. 1autor: Michal Lašák6.6.2012, 19:05

V súčasných prehliadačoch sa dá použiť aj placeholder z HTML 5. Jednoduchšie na implementáciu, mal by fungovať aj pri vypnutom javascripte.

Poraďte sa s nami o službách, ktoré potrebujete. My vám pripravíme konkrétnu cenovú ponuku.

Kontaktujte nás

Najlepší redakčný systém, čo som videl – a videl som ich celkom dosť...

Ing. Roman Hesteric
www.priklady.eu