Discussion :

[StringBuilder]

Bonjour,

J'ai un champ de type input text sur lequel je souhaite faire un certain nombre de contrôles, bloquants ou non au moment où je tente de sortir du champ.

J'ai donc le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<input type="text" onchange="
  if (untest())
  {
    alert('un message');
    this.focus();
    return false;
  }
  unautrecontrole();
  return true;
"/>

Je veux que le contrôle "untest()" soit bloquant.
Mais "unautrecontrole()" doit simplement afficher une alert, mais laisser l'utilisateur continuer ce qu'il était en train de faire.

Voici les scénario :
-> Sortie du champ avec clic souris hors du champ : OK
-> Sortie du champ avec la touche tabulation : OK
-> Tentative de soumission du formulaire depuis le champ en frappant la touche entrée : OK
-> Tentative de soumission du formulaire depuis le champ en cliquant sur le bouton submit : KO

Lorsque "unautrecontrole()" affiche l'alert, pas moyen de soumettre le formulaire par clic sur le bouton submit lorsque le focus est dans le champ texte.

Comment remédier à ce problème ? J'avoue que je ne comprends pas ce qui cloche.

A noter que seul IE est utilisé sur ce site (page d'un ERP qui ne supporte que IE), c'est donc le comportement non standard de IE qui doit être pris en compte.

J'imagine qu'il y a un truc avec le "bouillonnement" des évéments qui manque, mais je vois pas quoi, d'autant qu'avec la touche entrée ça marche nickel...

[SpaceFrog]

ne mets pas le code de la fonction dans l'evenement.

[StringBuilder]

Et ça va suffire ???

(Ceci dit, c'est plus facile à dire qu'à faire, vu que le code est généré par des template XSL).

[StringBuilder]

J'avais raison d'être sceptique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function CheckQtecde(obj, index, msg1, msg2, qteliv)
{
	if (!isDouble(obj))
	{
		obj.focus();
		return false;
	}
	if (parseFloat(obj.value) > parseFloat(document.getElementById("oldQtecde-" + index).value))
	{
		alert(msg1);
		obj.value = document.getElementById("oldQtecde-" + index).value;
		obj.focus();
		return false;
	}
	if (parseFloat(qteliv) > parseFloat(obj.value))
	{
		alert(msg2.replace("@1", qteliv));
		obj.value = document.getElementById("oldQtecde-" + index).value;
		obj.focus();
		return false;
	}
	NormalizePrxbrtFac(index);
	ModifPrxbrtFac(index,4);
	if (document.getElementById("chp:Suistk-" + index).value != 'N')
	{
		controleQuantite(index);
	}
	controleQuantiteContrat(index);
	return true;
}

Et le XSL :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<input size="{$MSQAFF_QTECDE}" maxlength="{$MSQSAI_QTECDE}" type="text" name="chp:Qtecde-{@index}" id="chp:Qtecde-{@index}" value="{format-number(Qtecde/business_data,$FORMAT_QTE,$LOCALE)}">
	<xsl:attribute name="onchange">
	return CheckQtecde(this, <xsl:value-of select="@index"/>, "<xsl:value-of select="gnx:trad($LANGUAGE,'LBL.QUEBAISSE',$CTXTRD)"/>", "<xsl:value-of select="gnx:trad($LANGUAGE,'LBL.QTEDEJALIV',$CTXTRD)"/>", "<xsl:value-of select="$QTELIV"/>");
	</xsl:attribute>
	<xsl:attribute name="title">
		<xsl:value-of select="gnx:replace(gnx:trad($LANGUAGE,'LBL.DEJALIV',$CTXTRD), '@1', $QTELIV)"/>
	</xsl:attribute>
</input>

Si je sors du champ sans cliquer sur le bouton du formulaire, j'ai le comportement attendu.
Si je frappe entrée lorsque je suis dans le champ, j'ai le comportement attendu.
Mais si je clique sur le bouton du formulaire lorsque le champ à le focus, lorsque "controleQuantite(index)" affiche une alert, le formulaire n'est pas soumis.

[dragonno]

Je veux que le contrôle "untest()" soit bloquant.
Mais "unautrecontrole()" doit simplement afficher une alert, mais laisser l'utilisateur continuer ce qu'il était en train de faire.

Donc pourquoi tu utiliserais forcément un alert() lors du deuxième controle ?
Fais le message de façon non blocante, par exemple avec un DIV contenant un message et positionné en absolute à la bonne position et éventuellement avec une texture de fond.
Tu affiches le panneau DIV de telle sorte qu'il disparaisse après deux secondes.
Tu peux aussi au lieu d'un panneau message en DIV faire juste apparaître une phrase voyante bien placé au dessus ou en dessous de l'input texte.
C'est au choix.

[StringBuilder]

Le souci, c'est que si je clique sur "submit", la page va recharger avant que l'utilisateur n'ait pu lire le message dans le div...

Mais tu me donnes une idée...

[dragonno]

Mais tu me donnes une idée...

C'est déjà ça

[StringBuilder]

Bon, l'idée était relativement pourrie, mais finalement ça m'a mis sur une autre piste (guère moins pourrie ceci dit) qui marche.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function CheckQtecde(obj, index, msg1, msg2, qteliv)
{
	var ex = window.event.x;
	var ey = window.event.y;
 
[...] // L'ancien code de la fonction
 
	if (document.elementFromPoint(ex, ey).value == "Modifier")
	{
		document.elementFromPoint(ex, ey).click();
	}
	return true;
}

Donc quand l'événement est déclenché, si la souris était au dessus du bouton "Modifier", je force un clic dessus.

Le seul hic, c'est si la souris était là par hasard et que l'utilisateur a fait TAB par exemple...

Mais tant pis

[SpaceFrog]

un controle sur le onsubmit serair plus simple ...

[dragonno]

Si le submit se fait apres le deuxieme controle il aura eu le temps de voir la phrase non ?
Sinon je pense à ça aussi :
Le deuxième controle est sensé affiché une phrase prés du input texte, et tu dis que le submit va effacer la phrase, mais la phrase peut trés bien être reaffichée après le submit, si ce submit crée un cookie pour servir de témoin au deuxième controle.

Je viens de relire ton premier post et ça me donne une idée :

Tu places le submit dans une fonction et dans cette fonction tu mets d'abord une instruction pour enlever le focus de l'input text, puis à la suite une instruction pour créer le submit().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function envoie()
{
// ci tu enlève le focus de l'input.
// et là tu fais le submit()
}

La fonction tu la lance de la façon dont tu faisais le submit au départ, sauf que cette fois il se fera après le unfocus.