CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 24 22:46:54

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

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

EVENT HANDLER (INFO-AIDE FORMULAIRE + QQS FONCTIONS)

Information sur la source

Note :

8,00 / 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 :9 350

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 ! :)

IMAGES RÉACTIVE !!

Toutes les sources de pi0up51

Sources de la même categorie

FORMULAIRE TABLEAU par vic511

FORMULAIRE DYNAMIQUE par Niidhogg

CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama

SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

NOMBRE ALÉATOIRE par gt_371

ÉVÉNEMENTS PÉRIODIQUES ET TEMPORAIRES RÉGLÉS ET CONTRÔLÉS AV... par abdelaziz_info

AJAXSIMPLIFIER EN UNE SEUL FONCTION ( GET && POST ) par wizard512

CRÉER TOUCHES DE RACCOURCIS COMPATIBLES INTERNET EXPLORER ET... par olymat

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é de mon problème est dans le titre. En fait, je souhaiterais dé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)<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

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : AFFICHER UNE LIGNE OU UN TEXTAREA APRèS UN CLIC SUR UN LIEN par ayalo

CODE BUG JAVASCRIPT par zaikoe

RE : DéSACTIVER LA TOUCHE DE RETOUR par jopop

DéSACTIVER LA TOUCHE DE RETOUR par fattey

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€
Application iphone et android - gestion contenu et version derivees-URGENT
Budget : 5 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP