Show/Hide wit onfocus/onblur?

Ewergreen · 9 apr 2009

Ok, ik ken absoluut niet van javascript, maar ik wou toch iets kleins verwezenlijken. Moest iemand mij een stukje kant en klare code kunnen bezorgen, graag. Als het principe er inzit, dan haal ik de rest er normaal ook wel uit.

Ik heb hieronder al een voorbeeld. Dit werkt perfect en doet wat ik wil. buiten dat je op het plusje moet klikken. Ik wil dat dit show geeft als je in het tekstvak komt en hide als je er weer uitgaat.

Thanks!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- Switch Content Script Start Here -->
<script language="JavaScript">

<!-- 
function show_hide(the_layer)
{
  if(document.getElementById(the_layer))
  {
    if(document.getElementById(the_layer).style.display == 'none')
    {
      document.getElementById(the_layer).style.display = 'inline';
    }
    else
    {
      document.getElementById(the_layer).style.display = 'none';
    }
  }
}
//-->
</script>

</head>

<body>
<table border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td>Naam:</td>
    <td><input type="text" name="naam" /> </td>
    <td><a href="javascript:show_hide('foobar');">+</a></td>
    <td id="foobar" style="display: none;">Vul hier uw naam in.</td>
  </tr>
  <tr>
    <td>E-Mail:</td>
    <td><input type="text" name="email" /></td>
    <td><a href="javascript:show_hide('foobars');">+</a></td>
    <td id="foobars" style="display: none;">Vul hier uw E-mail adres in.</td>
  </tr>
  <tr>
    <td colspan="3"><div align="center">
      <input type="submit" name="submit" value="submit"/> 
    </div></td>
    <td>&nbsp;</td>
  </tr></table>

</body>
</html>

That Guy · 9 apr 2009

dit is het idee:

html:

HTML:

<input type='text' onfocus='Xfocus();' onblur='Xblur();' />

<div id='hint' style='display: none;'>
text
</div>

en als js:

PHP:

//js
function Xfocus()
{
document.getElementById('hint').style.display = 'block';
}
function Xblur()
{
document.getElementById('hint').style.display = 'none';
}

het hoeft natuurlijk geen <div> te zijn, maar kan willekeurig element zijn. Je zult t zelf moeten uitbreiden.

Ewergreen · 9 apr 2009

Mmh, ik zie niet in hoe zoiets ooit kan werken voor meerdere input fields. Zal waarschijnlijk aan mij liggen hoor.

HTML:

<script language="JavaScript">

<!-- 
//js
function Xfocus()
{
document.getElementById('hint').style.display = 'block';
}
function Xblur()
{
document.getElementById('hint').style.display = 'none';
}
//-->
</script>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<input type='text' onfocus='Xfocus();' onblur='Xblur();' />
 
<div id='hint' style='display: none;'>text</div>

<input type='text' onfocus='Xfocus();' onblur='Xblur();' />
<div id='hint' style='display: none;'>text</div>

That Guy · 9 apr 2009

een beetje creatief zijn:

PHP:

//js
function showElem(elem)
{
   document.getElementById(elem).style.display = 'block';
}
function hideElem(elem)
{
   document.getElementById(elem).style.display = 'none';
}

HTML:

<input type='text' onfocus='showelem('help1');' onblur='hideElem('help1');' />
<span id='help1'>Help1</span>

<input type='text' onfocus='showelem('help2');' onblur='hideElem('help2');' />
<span id='help2'>Help2</span>

etc.

JP Romijn · 9 apr 2009

Je moet een relatie moeten verzinnen tussen het input veld en het uitleg element. Dat kan op veel verschillende manieren. Zoals de manier die Vegras liet zien.

Maar je kan bijvoorbeeld beide elementen in hetzelfde parent element zetten. Wanneer de velden bijvoorbeeld in een tabel staan:

HTML:

<table>
	<tr>
		<td> 
			<input type='text' />
			<span>Uitleg over de input komt hier</span>
		</td>
	</tr>
</table>

Bij de input koppel je dan onfocus, onblur aan een functie. Als bijvoorbeeld deze:

PHP:

function toggleHelp(e) {
    //Verkrijg het event object wanneer het niet meegegeven is aan de functie (Internet Explorer)
    if (!e) var e = window.event;

    //De functie om de span in de parent container te verkrijgen en weergeven/verdwijnen
    if(e.type == 'blur') {
        this.parentNode.getElementsByTagName('span')[0].style.display = 'none';
    } else
    if(e.type == 'focus') {
        this.parentNode.getElementsByTagName('span')[0].style.display = 'inline';
    }
}

Ewergreen · 10 apr 2009

Aangezien ik ze allebei niet kan laten werken, gok ik dat ik iets verkeerds doe:shocked:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function showElem(elem)
{
   document.getElementById(elem).style.display = 'block';
}
function hideElem(elem)
{
   document.getElementById(elem).style.display = 'none';
}

</script>
</head>

<body>

<input type='text' onfocus='showelem('help1');' onblur='hideElem('help1');' />
<span id='help1' style="display:none;">Help1</span>
 
<input type='text' onfocus='showelem('help2');' onblur='hideElem('help2');' />
<span id='help2' style="display:none;">Help2</span>
</body>
</html>

JP Romijn · 10 apr 2009

Ewergreen zei:
Aangezien ik ze allebei niet kan laten werken, gok ik dat ik iets verkeerds doe:shocked:

Bij Vegras voorbeeld is het waarschijnlijk dat je showelem gebruikt waar het showElem moet zijn. Hoofdletter E.

Mijn voorbeeld; heb je wel onfocus en onblur events geregistreerd op je input? Ik had die weggelaten omdat je die zowel via javascript als in je HTML kan doen. Ik vind in javascript beter. Maar anders doe je het zo in HTML:

HTML:

<table>
    <tr>
        <td> 
            <input type='text' onfocus='toggleHelp' onblur='toggleHelp' />
            <span>Uitleg over de input komt hier</span>
        </td>
    </tr>
</table>

Hoop dat het je lukt.

Ewergreen · 10 apr 2009

Ok, ik begin me ECHT dom te voelen.

Het voor mij niet werkende voorbeeld van Vargas
http://users.telenet.be/wouterbertels/javascript1.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

//js
function showElem(elem)
{
   document.getElementById(elem).style.display = 'block';
}
function hideElem(elem)
{
   document.getElementById(elem).style.display = 'none';
}
</script>
</head>

<body>

<input type='text' onfocus='showElem('help1');' onblur='hideElem('help1');' />
<span id='help1' style="display:none;">Help1</span>
 
<input type='text' onfocus='showElem('help2');' onblur='hideElem('help2');' />
<span id='help2' style="display:none;>Help2</span>

</body>
</html>

Het voor mij niet werkende voorbeeld van JP Romijn
http://users.telenet.be/wouterbertels/javascript2.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function toggleHelp(e) {
    //Verkrijg het event object wanneer het niet meegegeven is aan de functie (Internet Explorer)
    if (!e) var e = window.event;
 
    //De functie om de span in de parent container te verkrijgen en weergeven/verdwijnen
    if(e.type == 'blur') {
        this.parentNode.getElementsByTagName('span')[0].style.display = 'none';
    } else
    if(e.type == 'focus') {
        this.parentNode.getElementsByTagName('span')[0].style.display = 'inline';
    }
}

</script>

</head>

<body>

<table>
    <tr>
        <td> 
            <input type='text' onfocus='toggleHelp' onblur='toggleHelp' />
            <span style="display:none;">Uitleg over de input komt hier</span>
        </td>
    </tr>
</table>

</body>
</html>

That Guy · 10 apr 2009

die van mij (Vegras) werkt niet, omdat je dubbele single-quotes gebruikt. Zo dus:

<... bla=' doeIets('x'); ' ...>

op deze manier ziet-ie 'bla' met de waarde ' doeIets(' en de rest resulteerd in een error.

maak van deze:

PHP:

<input type='text' onfocus='showElem('help1');' onblur='hideElem('help1');' />

eens

PHP:

<input type='text' onfocus='showElem("help1");' onblur='hideElem("help1");' />

:thumb:

Ewergreen · 14 apr 2009

Fantastisch, die doet het perfect. Bedankt Vagras!

JP Romijn · 14 apr 2009

Ik heb nog eens naar mijn versie gekeken en het lijkt alleen te werken wanneer je de events via javascript registreert. Bijvoorbeeld door voor elk input veld deze functie aan te roepen met de id-naam:

PHP:

 function registreerInputVeld($veld_id) {
    document.getElementById($veld_id).onfocus= toggleHelp;
    document.getElementById($veld_id).onblur= toggleHelp;
 }

Je zou dit generiek kunnen maken door een functie te maken die in elke tabel met specifieke class-naam naar de inputvelden zoekt en de events registreert.

Het voornamelijke voordeel hiervan is voornamelijk dat je HTML schoon blijft van javascript. Ik denk dat voor jou de oplossing van Vegras voldoet.

Ewergreen · 14 apr 2009

J.P. ik heb puur voor mezelf nog even met uw oplossing geëxperimenteerd. Ze werkt nu ook, maar zoals je zelf al aangaf is Vagras' oplossing iets gebruiksvriendelijker. Ik ga daar dus bij blijven. Toch ook bedankt voor de moeite. Ik heb toch al iets meer inzicht in js dankzij jullie en uiteraard een werkend voorbeeld.

:thumb:

Show/Hide wit onfocus/onblur?

Ewergreen

Gebruiker

That Guy

Meubilair

Ewergreen

Gebruiker

That Guy

Meubilair

JP Romijn

Gebruiker

Ewergreen

Gebruiker

JP Romijn

Gebruiker

Ewergreen

Gebruiker

That Guy

Meubilair

Ewergreen

Gebruiker

JP Romijn

Gebruiker

Ewergreen

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy