1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Event handler (info-aide formulaire + qqs fonctions)

Event handler (info-aide formulaire + qqs fonctions)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 10 699 fois - Téléchargée 27 fois

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

Ajouter un commentaire Commentaires
Signaler
Messages postés
12
Date d'inscription
mardi 16 novembre 2004
Statut
Membre
Dernière intervention
3 juillet 2006
Un "retour arrière" compte pour 1 et pas pour -1.
Mal codé.
Signaler
Messages postés
181
Date d'inscription
jeudi 27 février 2003
Statut
Membre
Dernière intervention
2 mars 2009
Moi je trouve ca bien c'est super, mais quand tu as 15 ou 20 champs dans ton formulaire ou dans ta page, il faut que créer autant de div d'aide et quand tu en déplace une , il faut déplacer les autres. c'est dommage. Je crois que j'ai vu une source qui faisait ca... en tout cas c bien et ca peut servir ;)
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)