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

Ce site au démarrage

begin process at 2012 02 11 04:25:47

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 236

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

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

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

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

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

Forum

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011