Evenement et saisie automatique d'un champ Input

Version imprimable

11/03/2019, 03h53
Couin

Evenement et saisie automatique d'un champ Input

COUIN ! :D

Petite colle, en rapport avec un formulaire.

Sur un champ input text, correspondant au nom, je le colorise en rouge si le champs est vide lors de la validation des données.

Je souhaite le repasser en blanc lorsque le nom n'est plus vide.
J'ai donc ajouté un événement de type onkeyup, qui appelle une fonction repassant le champs en blanc si sa valeur n'est pas vide.
Impeccable, oui, mais en fait non.

Si le visiteur a déjà saisi son nom précédemment, et que la saisie automatique est activée sur son navigateur, le fait de cliquer sur le champ propose ce qu'il a déjà mis.
Si il clique sur cette saisie, le champ se rempli mais le visiteur n'ayant pas agit sur le clavier, le onkeyup n'est donc pas utilisé.

J'ai tenté un onmouseover, mais cela ne marche pas (car le pointeur est généralement en dessous du champ, lorsqu'on sélectionne une entrée déjà saisie.
onmouseout, idem, le pointeur n'est sur le champ à ce moment.

Bon certes c'est un peu du détail mais si il y a une solution simple ce serait bien.

Le cas contraire, j'adopterais un autre scénario :
- Blanchir le champs lorsqu'on clique dessus et observer sa value quand on le quitte : Si vide, il repasse en rouge.

Merki :)
Couin

Salut

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
<!DOCTYPE html>
<html lang="fr"> <!-- Radio74.html version 5 -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Ici mon titre</title>
		<style>
                        /* TAGs comentaire dans la partie style */
                </style>
		<script>
                        'use strict'; // force la déclaration des variables
                        function model() {
                                let elem = document.getElementById("rechercherquoi");
                                console.log("elem.value.length = " + elem.value.length);
                                if(elem.value.length ==0){
                                        elem.style.backgroundColor = "red";
                                }else{
                                        elem.style.backgroundColor = "white";
                                }
                        }//----------------------fin de la function model -----------------------------------
                </script>
	</head>
	<body>
		<!-- la partie affichée sur la page -->
		Bonjour le monde
					<input type="text" id="rechercherquoi" onkeyup="model()">
		<script>
                        //---------------------- du javascript complémentaire -----------------------------------
                </script>
 
	</body>
</html>

Sinon, mes ton code pour voir la différence.

11/03/2019, 17h08
eleydet

Bonjour,

Les événements onblur et onfocus seraient-il la solution?
https://developer.mozilla.org/fr/doc...andlers/onblur
https://developer.mozilla.org/fr/doc...ndlers/onfocus
11/03/2019, 20h57
danielhagnoul

:salut:

les événements change ou input : https://developer.mozilla.org/fr/docs/Web/Events/change
12/03/2019, 03h21
Couin

Hellooo :)

Merci pour vos réponses :)

Alors pour :
inkeyup : ne fonctionne pas si on écrit pas manuellement dans le champ.
onfocus : une fois qu'on a choisie une saisie automatique, le fond revient au blanc quand on revient sur le champ après l'avoir quitté.
onblur : le fond revient au blanc qu'une fois qu'on quitte le champ.

Pour change et input, j'ai adapté mais j'ai obtenu des résultats un peu bizarroïdes et hasardeux lol

Cependant, en m'inspirant du script de ProgElecT, je suis arrivé au résultat à escompté, en utilisant setInterval, je lance la fonction "model" qui vérifie la valeur du champ toutes les 200 ms et le mets en blanc dès qu'il n'est pas vide.

Donc bah du coup, même si pas obtenu de la manière que je voulais, le résultat escompté étant là, je passe en résolu :)

A bientôt ! :)
Couin
12/03/2019, 09h08
NoSmoking

Bonjour,
pourquoi ne pas passer par l'écouteur oninput ?

Code:

<input oninput="this.style.backgroundColor = this.value ? 'transparent' : '#ECD';" style="background-color:#ECD" required>
13/03/2019, 03h56
Couin

Hello,

OnInput avec Required détecte effectivement si il y a une entrée dans le champ, mais le cadre s'affichant lorsque le champs est vide se fait de manière ombrée autour du champs et non nette sur le bord intérieur comme je le souhaite.
J'ai testé quelques codes css pour modifier les propriétés de style de "required" mais sans succès.

Merki :)
13/03/2019, 09h20
NoSmoking

Citation:

OnInput avec Required détecte effectivement si il y a une entrée dans le champ,

1000 pardons, le required n'a rien avoir ici, je n'aurais pas du le mettre pour ne pas embrouiller :aie:

On a donc simplement :

Code:

<input oninput="this.style.backgroundColor = this.value ? 'transparent' : '#ECD';" style="background-color:#ECD">