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

Skôr ako začneme: nahliadnite do spracovania vašich osobných údajov

Súbory cookies používame najmä na anonymnú analýzu návštevnosti a vylepšovanie našich web stránok. Ak si nastavíte blokovanie zápisu cookies do vášho prehliadača, je možné, že web sa spomalí a niektoré jeho časti nemusia fungovať úplne korektne. Viac info k spracúvaniu cookies.