begin process at 2010 03 21 12:57:08
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > EVENT HANDLER (INFO-AIDE FORMULAIRE + QQS FONCTIONS)

EVENT HANDLER (INFO-AIDE FORMULAIRE + QQS FONCTIONS)


 Information sur la source

Note :
8 / 10 - par 2 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :eventhandler, event, évènement, handler, fonction Niveau :Débutant Date de création :09/05/2002 Date de mise à jour :09/05/2002 23:23:31 Vu :8 036
Auteur : pi0up51

Ecrire un message privé
Site perso
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

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

  • <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> 
<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


 Sources du même auteur

FRACTALE MANDLEBROT (GÉNÉRER EN JS AVEC BOUCLE FOR..)
POPUP QUI AFFICHE LE TEMPS DE CONNECTION SUR UNE PAGE ;)
INFOBULLE SOUS IE ET/OU NETSCAPE
DESSINER UN HISTOGRAMME (DYNAMIQUEMENT ! :)
Source avec Zip IMAGES RÉACTIVE !!
Toutes les sources de pi0up51

 Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous
IMPLEMENTATION DE HASHTABLE par ousous
JAVASCRIPT.UTIL.ITERATOR par ousous
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

NOMBRE ALÉATOIRE par gt_371
Source avec Zip ÉVÉNEMENTS PÉRIODIQUES ET TEMPORAIRES RÉGLÉS ET CONTRÔLÉS AV... par abdelaziz_info
Source avec Zip Source avec une capture AJAXSIMPLIFIER EN UNE SEUL FONCTION ( GET && POST ) par wizard512
CRÉER TOUCHES DE RACCOURCIS COMPATIBLES INTERNET EXPLORER ET... par olymat
Source avec Zip PETIT CONCOURS : FUNCTION(P,A,C,K,E,D) par WhiteDwarf

Commentaires et avis

Commentaire de aurelien0306 le 11/08/2003 15:44:44

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 ;)

Commentaire de Diti2330 le 26/03/2005 10:35:22

Un "retour arrière" compte pour 1 et pas pour -1.
Mal codé.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

setTimeout !!! ARg [ par Horfee ] J'ai un probleme avec la fonction setTimeout et la fonction event.x(ou y). en effet dans une fonction du style :function fnt(){ window.status = even envoyer une fonction quand j'appuye sur SPACE [ par tynmar ] Mesdames mesdemoiselles messieurs bonjour, la moiti&#233; de mon probl&#232;me est dans le titre. En fait, je souhaiterais d&#233;clencher une action event ou Event dans firefox [ par Nitruk ] Beaucoup de posts posent cette question sur le Web, notement sur JavascriptFR, et beaucoup d'utilisateurs expérimentés y répondent, j'ai passé une jou Quel évènement après un "onScroll" ? [ par baoab ] Bonjour à tous.Voici mon soucis :Je voudrais connaitre l'event qui succède le onScroll.En effet sur un onScroll, la fonction est lancée dès le début d onkeypress = function sous IE ne fonctionne pas, une autre solution? [ par maelob ] Bonjour à tous,comme expliquer dans ce sujet : http://www.javascriptfr.com/infomsg_FONCTION-REPLACE-EMULER-CAPS-LOCK_1069004.aspx#7Je suis en train de Gestion des evenements sous IE et Firefox [ par touareg ] Bonjour,voici ma question :j'ai une fonction en js qui se declenche lors d'un onclick (l'utilisateur clique sur une image calendrier)&lt;a onclick="ab Comment activer l'event handler d'un champ texte (formulaire)? [ par Simbabbad ] Bonjour, j'essaie de mettre en place bénévolement pour un forum auquel je participe un moyen pratique de changer la couleur de police et la couleur d Afficher une variable dans un div [ par bydouille ] Bonjour à tous, J'ai un input (bouton) qui appelle une fonction JS dès l'ouverture du script contenant la fonction, je déclare une variable. Dans la slideshows images en fonction de la taille écran visiteur [ par boboche974 ] bonjour J'aimerais faire un slideshow mais je coince un peu. - nom de l'image en passage de paramètre. (ex: 2010105.jpg soit 2010 correspondant égal fonction javascript [ par medhamdi12 ] Bonsoir à tous, il y a quelqu'un peut me donner une fonction javascript qui permet de vérifier si une valeur du zone de texte est une chaine de cara


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,515 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)