Evenements formulaire, priorite et comprehension...

Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Entraide Développement Développement Langage JavaScript Evenements formulaire, priorite et comprehension...

2 réponses

Robert T.

21/06/2004 à 10:15

Bonjour,

Je pietine sur la priorite et la comprehension des evenements dans un
formulaire...

J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3

Je n y comprends plus rien, deja je comprends pas la logique des evenements,
mais en plus ça different des elelements textes et des elements select...

Quelqu un peut eclairer ma lanterne...

Un grand merci d avance...

A +

Le code :

<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
alert("onfocus="+elem.name);
}

function formulaire_onblur(elem)
{
alert("onblur="+elem.name);
}

function formulaire_onkeydown(elem)
{
alert("onkeydown="+elem.name);
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'
><br>
<input tabindex='2' type='text' name='zone2' value="zone2"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'
><br>
<select tabindex='3' type='select' name='zone3' value="zone3"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>

2 réponses

Olivier

21/06/2004 à 16:05

"Robert T." wrote in
news:40d6992f$0$3977$:

Bonjour,
J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

Euh, perso quand je clicke sur zone1 ça déclenche son onFocus et c'est
tout. (Ca déclenche aussi le onBlur de l'objet document, mais comme içi
il n'est pas tracé ...)

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3
Là tout d'abord j'ai obtenu les mêmes résultats bizarres, et puis j'ai

refait le test en tracant différemment, en faisant écrire aux fonctions
leur texte dans un DIV placé à la fin du document. Et du coup, le
tracage n'est pas du tout le même (me demande pas pourquoi), et on
obtient un résultat bcp plus logique :
onkeydown=zone2
onblur=zone2
onfocus=zone3

Voici mon code :
<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
trace.innerHTML += "onfocus="+elem.name+"<br>";
}

function formulaire_onblur(elem)
{
trace.innerHTML += "onblur="+elem.name+"<br>";
}

function formulaire_onkeydown(elem)
{
trace.innerHTML += "onkeydown="+elem.name+"<br>";
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'

<br>
<input tabindex='2' type='text' name='zone2' value="zone2"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'

<br>
<select tabindex='3' type='select' name='zone3' value="zone3"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>
<div id=trace></div>

@+
O.L.

"Robert T." <ANTISPAM.908thx@free.fr> wrote in
news:40d6992f$0$3977$626a14ce@news.free.fr:

Bonjour,
J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

Euh, perso quand je clicke sur zone1 ça déclenche son onFocus et c'est
tout. (Ca déclenche aussi le onBlur de l'objet document, mais comme içi
il n'est pas tracé ...)

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3
Là tout d'abord j'ai obtenu les mêmes résultats bizarres, et puis j'ai

refait le test en tracant différemment, en faisant écrire aux fonctions
leur texte dans un DIV placé à la fin du document. Et du coup, le
tracage n'est pas du tout le même (me demande pas pourquoi), et on
obtient un résultat bcp plus logique :
onkeydown=zone2
onblur=zone2
onfocus=zone3

Voici mon code :
<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
trace.innerHTML += "onfocus="+elem.name+"<br>";
}

function formulaire_onblur(elem)
{
trace.innerHTML += "onblur="+elem.name+"<br>";
}

function formulaire_onkeydown(elem)
{
trace.innerHTML += "onkeydown="+elem.name+"<br>";
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'

<br>
<input tabindex='2' type='text' name='zone2' value="zone2"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'

<br>
<select tabindex='3' type='select' name='zone3' value="zone3"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>
<div id=trace></div>

@+
O.L.

Vous avez filtré cet utilisateur ! Consultez son message

"Robert T." wrote in
news:40d6992f$0$3977$:

Bonjour,
J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

Euh, perso quand je clicke sur zone1 ça déclenche son onFocus et c'est
tout. (Ca déclenche aussi le onBlur de l'objet document, mais comme içi
il n'est pas tracé ...)

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3
Là tout d'abord j'ai obtenu les mêmes résultats bizarres, et puis j'ai

refait le test en tracant différemment, en faisant écrire aux fonctions
leur texte dans un DIV placé à la fin du document. Et du coup, le
tracage n'est pas du tout le même (me demande pas pourquoi), et on
obtient un résultat bcp plus logique :
onkeydown=zone2
onblur=zone2
onfocus=zone3

Voici mon code :
<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
trace.innerHTML += "onfocus="+elem.name+"<br>";
}

function formulaire_onblur(elem)
{
trace.innerHTML += "onblur="+elem.name+"<br>";
}

function formulaire_onkeydown(elem)
{
trace.innerHTML += "onkeydown="+elem.name+"<br>";
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'

<br>
<input tabindex='2' type='text' name='zone2' value="zone2"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'

<br>
<select tabindex='3' type='select' name='zone3' value="zone3"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>
<div id=trace></div>

@+
O.L.

Robert T.

22/06/2004 à 08:47

Merci bien pour tes infos...

Je commence a comprendre ;o)

A +
"Olivier" a écrit dans le message de
news:

"Robert T." wrote in
news:40d6992f$0$3977$:

Bonjour,
J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

Euh, perso quand je clicke sur zone1 ça déclenche son onFocus et c'est
tout. (Ca déclenche aussi le onBlur de l'objet document, mais comme içi
il n'est pas tracé ...)

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3
Là tout d'abord j'ai obtenu les mêmes résultats bizarres, et puis j'ai

refait le test en tracant différemment, en faisant écrire aux fonctions
leur texte dans un DIV placé à la fin du document. Et du coup, le
tracage n'est pas du tout le même (me demande pas pourquoi), et on
obtient un résultat bcp plus logique :
onkeydown=zone2
onblur=zone2
onfocus=zone3

Voici mon code :
<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
trace.innerHTML += "onfocus="+elem.name+"<br>";
}

function formulaire_onblur(elem)
{
trace.innerHTML += "onblur="+elem.name+"<br>";
}

function formulaire_onkeydown(elem)
{
trace.innerHTML += "onkeydown="+elem.name+"<br>";
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'
<br>
<input tabindex='2' type='text' name='zone2' value="zone2"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'
<br>
<select tabindex='3' type='select' name='zone3' value="zone3"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>
<div id=trace></div>

@+
O.L.

Merci bien pour tes infos...

Je commence a comprendre ;o)

A +
"Olivier" <conquest_NOSP@M_firstream.net> a écrit dans le message de
news:Xns950FA3B82718Eantares7364@212.27.42.66...

"Robert T." <ANTISPAM.908thx@free.fr> wrote in
news:40d6992f$0$3977$626a14ce@news.free.fr:

Bonjour,
J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

Euh, perso quand je clicke sur zone1 ça déclenche son onFocus et c'est
tout. (Ca déclenche aussi le onBlur de l'objet document, mais comme içi
il n'est pas tracé ...)

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3
Là tout d'abord j'ai obtenu les mêmes résultats bizarres, et puis j'ai

refait le test en tracant différemment, en faisant écrire aux fonctions
leur texte dans un DIV placé à la fin du document. Et du coup, le
tracage n'est pas du tout le même (me demande pas pourquoi), et on
obtient un résultat bcp plus logique :
onkeydown=zone2
onblur=zone2
onfocus=zone3

Voici mon code :
<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
trace.innerHTML += "onfocus="+elem.name+"<br>";
}

function formulaire_onblur(elem)
{
trace.innerHTML += "onblur="+elem.name+"<br>";
}

function formulaire_onkeydown(elem)
{
trace.innerHTML += "onkeydown="+elem.name+"<br>";
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'

<br>
<input tabindex='2' type='text' name='zone2' value="zone2"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'

<br>
<select tabindex='3' type='select' name='zone3' value="zone3"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>
<div id=trace></div>

@+
O.L.

Vous avez filtré cet utilisateur ! Consultez son message

Merci bien pour tes infos...

Je commence a comprendre ;o)

A +
"Olivier" a écrit dans le message de
news:

"Robert T." wrote in
news:40d6992f$0$3977$:

Bonjour,
J ai fais un trace, voici de que ça donne :
je clique sur l element zone1
event zone
-----------
focus zone1
blur zone1
key zone1
focus zone1 <- pourquoi ???
focus zone2
blur zone1 <- pourquoi apres le focus zone2 ???

Euh, perso quand je clicke sur zone1 ça déclenche son onFocus et c'est
tout. (Ca déclenche aussi le onBlur de l'objet document, mais comme içi
il n'est pas tracé ...)

je fais tab sur l element zone2
event zone
-----------
blur zone2
key zone2
focus zone3 <- pour a nouveau le focus ?
blur zone3
blur zone2 <- pourquoi ?
focus zone2
blur zone3 <- pourquoi ?
focus zone3
Là tout d'abord j'ai obtenu les mêmes résultats bizarres, et puis j'ai

refait le test en tracant différemment, en faisant écrire aux fonctions
leur texte dans un DIV placé à la fin du document. Et du coup, le
tracage n'est pas du tout le même (me demande pas pourquoi), et on
obtient un résultat bcp plus logique :
onkeydown=zone2
onblur=zone2
onfocus=zone3

Voici mon code :
<html>
<head>
<SCRIPT LANGUAGE="javascript" >
function formulaire_onfocus(elem)
{
trace.innerHTML += "onfocus="+elem.name+"<br>";
}

function formulaire_onblur(elem)
{
trace.innerHTML += "onblur="+elem.name+"<br>";
}

function formulaire_onkeydown(elem)
{
trace.innerHTML += "onkeydown="+elem.name+"<br>";
}
</SCRIPT>
</head>
<body>
<form name="formulaire_centre">
<input tabindex='1' type='text' name='zone1' value="zone1"
onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='10' size='10'
<br>
<input tabindex='2' type='text' name='zone2' value="zone2"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" value='' maxlength='80' size='50'
<br>
<select tabindex='3' type='select' name='zone3' value="zone3"

onfocus="formulaire_onfocus(this)" onblur="formulaire_onblur(this)"
onkeydown="formulaire_onkeydown(this)" >
<option value='' selected ></option>
<option value='zone3' selected >zone3 </option>
</select><br>
</form>
</body>
</html>
<div id=trace></div>

@+
O.L.

Evenements formulaire, priorite et comprehension...

2 réponses

Veuillez sélectionner un problème