Event handler (info-aide formulaire + qqs fonctions)

Commenter

Contenu du snippet

Vélà un petit script qui vous montre comment afficher une aide (sous forme de calque) quand la souris pass e au dessus d'un champs de formulaire ou qd on ecrit dans ce champs ;)

On peut aussi voir une autre fonction : Compter le nb de caractère saisie dans un champs (donc contrôlez également plus surement le formulaire ;)

Source / Exemple : 


<html>

<head>
  <title>Event Handler</title>
</head>

<body bgcolor=#eeeeee text=#555555 link=#0000ff vlink=#0000ff
 alink=#ff0000>

<p align=left>
<font size=2 face="arial,helvetica" color=#ff7700>
<b>Exemple de programme pour <u>Event-Handler</u></b><br>
</font>

<p align=left>
<font size=2 face="arial,helvetica">

<form name=f>
  <input type=text name=count value="0" size=3
   onkeydown="alert('Cette valeur est créée automatiquement!');
   return false;"><br>
  <br>
  <input type=text name=text value=""><br>
  <br>
  <input type=reset name=reset value="Restaurer"><br>
</form>

</font>
</p>

<div id="countinfo" style="position:absolute;
 left:220px; top:35px; visibility: hidden">
  <table border=0 cellspacing=0 cellpadding=4>
  <tr><td bgcolor=#00ff77>
    <font size=2 face="arial,helvetica" color=#333333><b>
      Ici est indiqué le nombre<br>
      de caractères saisis.<br>
    </b></font>
  </td></tr></table>
</div>

<div id="textinfo" style="position:absolute;
left:220px; top:65px; visibility: hidden">
  <table border=0 cellspacing=0 cellpadding=4>
  <tr><td bgcolor=#0077ff>
    <font size=2 face="arial,helvetica" color=#333333><b>
      Tapez votre texte<br>
      dans cette zone.<br>
    </b></font>
  </td></tr></table>
</div>

<div id="resetinfo" style="position:absolute;
left:220px; top:95px; visibility: hidden">
  <table border=0 cellspacing=0 cellpadding=4>
  <tr><td bgcolor=#ff0000>
    <font size=2 face="arial,helvetica" color=#333333><b>
      Ce bouton<br>
      restaure les valeurs de départ<br>
      des champs.<br>
    </b></font>
  </td></tr></table>
</div>

<script language="JavaScript"><!--

document.f.text.onkeydown = function()
 { document.f.count.value++; }

document.f.reset.onclick = function()
 { return(confirm('Voulez-vous vraiment\n'
 +'annuler toutes les saisies ?')); }

if(navigator.appName.indexOf('Netscape') != -1)
{
  with (document)
  {
    f.count.onmouseover = function()
     { countinfo.visibility='visible'; }
    f.count.onmouseout = function()
     { countinfo.visibility='hidden'; }

    f.text.onmouseover = function()
     { textinfo.visibility='visible'; }
    f.text.onmouseout = function()
     { textinfo.visibility='hidden'; }

    f.reset.onmouseover = function()
     { resetinfo.visibility='visible'; }
    f.reset.onmouseout = function()
     { resetinfo.visibility='hidden'; }
  }
}

if(navigator.appName.indexOf('Explorer') != -1)
{
  with (document)
  {
    f.count.onmouseover = function()
     { countinfo.style.visibility='visible'; }
    f.count.onmouseout = function()
     { countinfo.style.visibility='hidden'; }

    f.text.onmouseover = function()
     { textinfo.style.visibility='visible'; }
    f.text.onmouseout = function()
     { textinfo.style.visibility='hidden'; }

    f.reset.onmouseover = function()
     { resetinfo.style.visibility='visible'; }
    f.reset.onmouseout = function()
     { resetinfo.style.visibility='hidden'; }
  }
}

//--></script>

</body>

</html>

Conclusion :


SUr ce j'espère k'il vous servira en tout cas a apprendre ;)

@tte et bonn' prog'
pi0up51
http://www.infobox51.fr.st

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (pi0up51)