activation d'un bouton sur formulaire
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:
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> |
