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

Ce site au démarrage

begin process at 2010 02 10 06:30:57

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 :7 952

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

CALCULS RAYNAUX V2 par Ali Bibi

VALIDATION D'UN FORMULAIRE par grarestephane

CHAT VIRTUEL par grarestephane

AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

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

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : FONCTION RECHERCHE DATE par jeca

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5