Zoekveld automatisch leeg maken

[theblindman]

Beste,

Ik ben een beetje aan het spelen met javascript, maar hier kom ik niet uit.
Ik wil een textbox automatisch leeg laten halen als de focus daarop komt. Nu krijg ik alleen geen goed werkend javascriptje bij elkaar...

<script type="text/javascript">
function onfocus()
{ 
if (document.getElementById("zoekveld").value == 'Zoektermen')
	{
		document.getElementById("zoekveld").value = '';
	}
}
</script>

Wat is hier fout?
Alvast bedankt!

 

[That Guy]

[JS]function doeFocusDing()
{
document.getElementById('zoekveld').value = '';
}

document.getElementById('zoekveld').onfocus = doeFocusDing;[/JS]
je moet een event handler aangeven met een referentie naar een functie, zegmaar. De functie handeld dan verder dingen af. Noot: geen '( )' aan het eind van de functie die je in de .onfocus zet, want je wil niet de functie uitvoeren, maar een referentie naar de functie aangeven.


:thumb:

 

[theblindman]

Hmm, ik had dit in het form staan:

<input type="text" name="zoekveld" id="zoekveld" value="Zoektermen" onfocus="onfocus()" style="width: 120px; background: none; color: #FFF; border: solid 1px #333" />

En de eerder geposte code in de head, toch werkt 't niet... Ik denk dat het in de javasyntax zit, maar ik heb niet zo veel verstand van javascript.

 

[That Guy]

Ah! Okay, nou, dat werkt dus wel. Het enige probleem is dat Javascript je onfocus() functie ziet als gereserveerd woord, onfocus dus. Daarom komt er een loop (onfocus -> onfocus, welke weer een onfocus heeft, etcetera. Javascript weet niet wat ie er mee aanmoet na zo'n 10000x dit gedaan te hebben, en stopt ermee).

Als je de naam veranderd (op bijde plekken, in je html EN functienaam) dan werkt t wel. Probeer bv. eens onfocusx(). Dus:

<script type="text/javascript">
function onfocusx()
{ 
if (document.getElementById("zoekveld").value == 'Zoektermen')
    {
        document.getElementById("zoekveld").value = '';
    }
}
</script>
<input type="text" name="zoekveld" id="zoekveld" value="Zoektermen" onfocus="onfocusx()" style="width: 120px; background: none; color: #FFF; border: solid 1px #333" />

:thumb:

 

[theblindman]

Heel erg bedankt! Het werkt!
Bestaat er ook iets als een onlostfocus()?

 

[That Guy]

element.[B]onblur[/b] = iets;

:thumb:

 

[theblindman]

Bedankt!

Ik dacht dat ik de functie nu wel uit kon breiden, maar dus mooi niet...

In head:

function onfocusx(naam,default)
{
elem = document.getElementById(naam);
if (elem.value == default)
	{
		elem.value = "";
	}
}

<input type="text" name="zoekveld" id="zoekveld" value="Zoektermen" onfocus="onfocusx('zoekveld','Zoektermen')" style="width: 120px; background: none; color: #FFF; border: solid 1px #333" />

Ik heb nog een paar textboxen die ik hierdoor ook makkelijk hetzelfde dacht te kunnen laten doen...

 

[That Guy]

Error: missing formal parameter
Source File: file:///test.html
Line: 5, Column: 23
Source Code:
function onfocusx(naam,default)

default is een gereserveerd (ha! alweer) woord in Javascript, het wordt bv. gebruikt in een switch().

Hernoem je parameter naar 'defaultText' oid, en verander uiteraard ook de naam in je functie zelf.


:thumb: