activation d'un bouton sur formulaire

**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

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

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

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

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...

activation d'un bouton sur formulaire

JavaScript

Discussions similaires

Partager

Partager