• Tweet
• Email
• Sharebar

• Tweet
• Email

Nogle funktionaliteter er slået så meget igennem som en standard, at de nærmest kan findes på ethvert website. En af de funktionaliteter er den, hvor indholdet i feltet på en søgeboks, bliver ryddet når man klikker. Her er et lille jQuery script, der klarer den sag automatisk.

Hvis du ikke er interesseret i forklaringen (Det burde du nok være, men hey… hvem har tid?) kan du hente scriptet nederst på siden. Det eneste du behøver er, at inkludere scriptet på siden og sætte en klasse på de felter, du vil have ryddet.

Forklaring

Vi skal først finde en metode til, at gemme den originale tekst fra søgefeltet (i.e. “Søg…” eller lignende). Feltets value attribut vil nemlig ændre værdi, så snart der skrives i feltet. jQuery har en smart .data() metode, der giver mulighed for at gemme data på ethvert html element. Jeg bruger .each() metoden til, at gå igennem hvert input element med klassen clear.

$('input.clear').each(function(){
	$(this).data('txt', $(this).val());
});

Nu har hvert af de berørte input elementer gemt deres originale “standardværdi”, og den kan nu hentes igen med et kald til .data('txt'), ligegyldigt om værdien i boksen siden har ændret sig. Lad os få ryddet den tekstboks.

$('input.clear').each(function(){
	$(this).data("txt", $(this).val());
}).focus(function(){
	if ( $(this).val() === $(this).data("txt") ) {
		$(this).val("");
	}
});

Jeg bruger jQuerys focus event til, at udløse koden. Jeg vil kun rydde boksen, hvis indholdet er uændret, dvs. hvis den nuværende værdi er den samme som standardværdien. Til slut sætter jeg værdien til den tomme streng, "". Bemærk, forresten, at jeg bruger strict comparison, "===". Generelt set skal man altid sammenligne værdier i Javascript med strict comparison, dvs. "===" og "!==" i stedet for "==" og "!=". Hvorfor, må vi tage en anden gang.

Vi kunne egentlig stoppe her, men jeg vil gerne have én funktion mere i koden. Hvis der ikke skrives i boksen, foretrækker jeg, at standardværdien indsættes igen. Til det kan vi bruge jQuerys .blur event.

$('input.clear').each(function(){
	$(this).data("txt", $(this).val());
}).focus(function(){
	if ( $(this).val() === $(this).data("txt") ) {
		$(this).val("");
	}
}).blur(function(){
	if ($(this).val() === "" && !$(this).hasClass("once")) {
		$(this).val( $(this).data("txt") );
	}
});

Jeg har sneget et lille ekstra check ind, da det ikke er altid jeg er interesseret i at genindføre standardværdien. Input felter med klassen clear once, vil nu kun ryddes én gang og ikke få genindlæst standardværdien.

Endelige script

I det endelige script har jeg tilføjet et par kald til jQuerys $.trim() funktion, for at fjerne whitespace fra de indtastede værdier.

Husk at pakke hele molevitten ind i en jQuery .ready funktion. Jeg har brugt shorthand metoden, $(function() { // Kode her });.

$(function() {
	$('input.clear').each(function(){
		$(this).data( "txt", $.trim($(this).val()) );
	}).focus(function(){
		if ( $.trim($(this).val()) === $(this).data("txt") ) {
			$(this).val("");
		}
	}).blur(function(){
		if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
			$(this).val( $(this).data("txt") );
		}
	});
});

HTML:

<form>
	<input class="clear" type="text" value="Jeg bliver ryddet altid" />
	<input class="clear once" type="text" value="Jeg bliver kun ryddet én gang" />
	<input type="text" value="Jeg er helt normal" />
</form>

Håber det kunne bruges til noget

Har du forslag til ændringer eller nye features, så smid en hurtig kommentar.

Relaterede indlæg:

Sådan får du et shortcut til Basecamp i Chr...