activation d'un bouton sur formulaire [Résolu]

totale_eclipse · 14/10/2011, 14h19

Hello tout le monde,

J'ai un petit problème de conception/développement à vous soumettre.
J'ai un formulaire contenant un input text et un sumbit.

Voici le lien vers ce formulaire : http://perso.orange.fr/ultraviolet/index.html

Lorsque l'input text est vide, le submit est inactif.
Ce que je souhaite faire c'est rendre le bouton actif dès lors que le contenu de l'input text est non vide.
Et ceci en temps réel, c'est à dire que c'est pendant la saisie du texte dans l'input que le bouton doit s'activer/désactiver.

J'ai donc fait cela à l'aide de l'évènement "onkeyup" qui teste le contenu des champs
Jusque là pas de soucis, ça fonctionne bien.

Il me reste à traiter l'utilisation de la souris, car si un utilisateur colle du texte dans un champ (qui était vide jusque là) --> le bouton ne s'active pas. normal vous me direz, car le copier coller depuis la souris n'est pas concerné par l'évènement "onkeyup".
J'ai donc mis en place l'interdiction de coller, grâce à du js.
Jusque là toujours pas de soucis, ça fonctionne bien.

Enfin pour finir, il me reste à traiter le cas où le champ est non vide et que l'utilisateur sélectionne le texte (à la souris) et le supprime (toujours à la souris) pour lequel mon bouton ne se désactive pas, alors qu'il le faudrait.
J'ai donc mis en place un script qui empêche l'utilisateur de sélectionner du texte à la souris
C'est ce que j'ai fait à l'aide de l'évènement onselectstart que je fais renvoyer false (pour IE) , et à l'aide de la propriété MozUserSelect pour FF.
Encore une fois, pas de soucis, ca fonctionne.

Mais, problème : sous FF quand l'utilisateur clique dans le champ input, le focus de la souris ne veut pas se mettre là ou je clique, il reste là où il est ou bien (si on est sorti du champ) se met à l'endroit où il était lors de la dernière saisie dans le champ.
Et je ne trouve pas çà très "user friendly"

Voilà j'espère que mes explications ont été claires.

Avez-vous une solution à m'apporter pour ce problème de clic ?
Ou bien avez-vous une meilleur façon de faire générale ?

Merci d'avance à la communauté pour votre aide !

voici le code source de ma page :

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
31
32
33
34
35
36
37
<html>
<head>
 
<script type="text/javascript">
 
	function interdireSelection(target){
		if (typeof document.getElementById(target).onselectstart!= "undefined" )
			document.getElementById(target).onselectstart=function(){ return  false}
		else if (typeof document.getElementById(target).style.MozUserSelect!="undefined")
			document.getElementById(target).style.MozUserSelect="none"
		else
    	document.getElementById(target).onmousedown=function(){return false}
   }
 
	function testch(elem) {
		if(elem.value!="")
			document.getElementById('monsub').disabled=false;
		else
			document.getElementById('monsub').disabled = true;
	}
 
</script>
 
</head>
<body>
 
	<form id="monform" method="post" action="adresse_abo.php">
		<input type="text" id="monch" onkeyup="testch(this)" value="" />
		<input type="submit" disabled="disabled" id="monsub" />
	</form>		
 
	<script type="text/javascript">
		interdireSelection("monch");
	</script>
 
</body>
</html>

Bovino · 14/10/2011, 14h45

Citation:

Et je ne trouve pas çà très "user friendly"

Ah... parce que empêcher le copier coller et la sélection du texte, tu trouves ça user-friendly ?

Bon, les solutions possibles :
Pour le copier-coller : utiliser l'événement onpaste

Pour la suppression du texte sélectionné, j'ai du mal à comprendre comment tu fais pour supprimer du texte à la souris

... Tu es obligé d'appuyer sur Suppr ou Backspace, donc ça devrait réagir au keyup

Du coup, un code du style

Code :

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

1
2
3
function testChamp(champ){
    document.getElementById('monsub').disabled = champ.value == '';
}

Code html :

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

<input type="text" id="monch" onkeypress="testChamp(this)" onpaste="testChamp(this)" value="" />

totale_eclipse · 14/10/2011, 15h09

merci pour ta réponse,
je vais tester çà, et essayer de comprendre bien sur.

Pour répondre à ta question, je peux supprimer à la souris en faisant un clic droit puis supprimer.

Sinon, je suis d'accord avec toi, empêcher le copier-coller et la selection, n’est pas très userfriendly, j'avoue

mais c'était la seule façon que j'avais imaginée pour permettre à mon principe d'activation/désactivation de bouton, de fonctionner.

merci encore

Bovino · 14/10/2011, 15h34

Citation:

Envoyé par totale_eclipse

Pour répondre à ta question, je peux supprimer à la souris en faisant un clic droit puis supprimer.

Ah ouais... c'est vicieux quand même

Bon, un exemple testé sur FF7 et IE8 :

Code html :

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
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
   		<title>Test</title>
  </head>
  <body>
	<p>
		<form id="monform" method="post" action="adresse_abo.php">
			<input type="text" id="monch" onkeyup="testChamp(this)" onpaste="testChamp(this)" onfocus="testChamp(this)" onblur="testChamp(this)" value="" />
			<input type="submit" disabled="disabled" id="monsub" />
		</form>	
	</p>
<script>
function testChamp(champ){
    document.getElementById('monsub').disabled = champ.value == '';
}
</script>
  </body>
</html>

Pour ton histoire de supprimer à la souris, j'ai pas trouvé de solution idéale, mais dans l'exemple, si tu supprimmes avec le menu contextuel puis que tu cliques sur valider, le blur est appelé avant, teste le champ vide et met le submit en disabled, donc le clic n'a pas d'effet

Tober · 14/10/2011, 15h34

Citation:

Pour répondre à ta question, je peux supprimer à la souris en faisant un clic droit puis supprimer.

Pour répondre à ta remarque, tu peux aussi utiliser l'évènement oncut je dirais

edit: mince ca marche pas, j'aurais du vérifier mes sources ^^
Mais je suis sur que ca doit exister

Bovino · 14/10/2011, 15h36

Citation:

Envoyé par Tober

Pour répondre à ta remarque, tu peux aussi utiliser l'évènement oncut je dirais

Ben non justement, quand tu fais supprimer, tu fais pas couper

Tober · 14/10/2011, 15h41

Mais moi j'ai même pas le supprimer comme option

C'est sur quel navigateur ?

Pour ma culture, on catch comment un "cut" en javascript standart ?

Bovino · 14/10/2011, 15h44

Il faut sélectionner du texte dans l'input et faire clic droit, ça marche sur tous les navigateurs

Sinon, oncut existe bien (sauf pour Opera je crois) mais ne fonctionne que pour un CTRL+X ou clic droit > couper.

Tober · 14/10/2011, 15h46

oncut ne marche pas avec Chrome apparement (edit: en passant par le menu contextuel)

effectivement, j'ai bien l'option "delete", je cherchais "supprimer" comme un boulet...

Bovino · 14/10/2011, 15h58

Si, oncut fonctionne bien, le problème, c'est que l'événement est déclenché avant que le champ ne soit coupé... Petit patch pour mon exemple :

Code :

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

1
2
3
function testChamp(champ){
    setTimeout(function(){document.getElementById('monsub').disabled = champ.value == ''}, 0);
}

en mettant un setTimeout à 0, JavaScript attend juste que la pile d'instructions soit vidée (donc qu'en interne, le champ soit vidé) avant de lancer le callback

totale_eclipse · 14/10/2011, 19h04

merci à tous pour vos réponses.
J'ai appliqué une autre méthode et ça marche nickel :
j'ai mis un setinterval sur l'évènement onfocus qui execute ma fonction test toutes les 200ms
(Merci Yann au passage

)

Plus besoin d’interdire le copier/coller, ni la sélection

et là je suis 100% "user friendly"

Bovino · 14/10/2011, 20h25

Sincèrement, ça ne me semble pas être la meilleure solution...

M'enfin, ensuite, c'est toi qui vois...

14/10/2011, 15h44	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Il faut sélectionner du texte dans l'input et faire clic droit, ça marche sur tous les navigateurs Sinon, oncut existe bien (sauf pour Opera je crois) mais ne fonctionne que pour un CTRL+X ou clic droit > couper. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

14/10/2011, 20h25	#12
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Sincèrement, ça ne me semble pas être la meilleure solution... M'enfin, ensuite, c'est toi qui vois... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

14/10/2011, 15h09	#3
totale_eclipse Invité de passage Inscription : janvier 2011 Messages : 15 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 15 Points : 1 Points : 1	merci pour ta réponse, je vais tester çà, et essayer de comprendre bien sur. Pour répondre à ta question, je peux supprimer à la souris en faisant un clic droit puis supprimer. Sinon, je suis d'accord avec toi, empêcher le copier-coller et la selection, n’est pas très userfriendly, j'avoue mais c'était la seule façon que j'avais imaginée pour permettre à mon principe d'activation/désactivation de bouton, de fonctionner. merci encore
	00

14/10/2011, 15h41	#7
Tober Membre Expert Thomas Ingénieur développement logiciels Inscription : juillet 2007 Messages : 741 Détails du profil Informations personnelles : Nom : Thomas Âge : 27 Localisation : Luxembourg Informations professionnelles : Activité : Ingénieur développement logiciels Informations forums : Inscription : juillet 2007 Messages : 741 Points : 1 000 Points : 1 000	Mais moi j'ai même pas le supprimer comme option C'est sur quel navigateur ? Pour ma culture, on catch comment un "cut" en javascript standart ?
	00

14/10/2011, 15h46	#9
Tober Membre Expert Thomas Ingénieur développement logiciels Inscription : juillet 2007 Messages : 741 Détails du profil Informations personnelles : Nom : Thomas Âge : 27 Localisation : Luxembourg Informations professionnelles : Activité : Ingénieur développement logiciels Informations forums : Inscription : juillet 2007 Messages : 741 Points : 1 000 Points : 1 000	oncut ne marche pas avec Chrome apparement (edit: en passant par le menu contextuel) effectivement, j'ai bien l'option "delete", je cherchais "supprimer" comme un boulet...
	00

14/10/2011, 19h04	#11
totale_eclipse Invité de passage Inscription : janvier 2011 Messages : 15 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 15 Points : 1 Points : 1	merci à tous pour vos réponses. J'ai appliqué une autre méthode et ça marche nickel : j'ai mis un setinterval sur l'évènement onfocus qui execute ma fonction test toutes les 200ms (Merci Yann au passage ) Plus besoin d’interdire le copier/coller, ni la sélection et là je suis 100% "user friendly"
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email