Evenement et saisie automatique d'un champ Input

**Couin** · 11/03/2019, 03h53

COUIN !

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

**ProgElecT** · 11/03/2019, 08h47

Salut

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

**eleydet** · 11/03/2019, 17h08

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

**danielhagnoul** · 11/03/2019, 20h57

les événements change ou input : https://developer.mozilla.org/fr/docs/Web/Events/change

**Couin** · 12/03/2019, 03h21

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

**NoSmoking** · 12/03/2019, 09h08

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

Code html :

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

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

**Couin** · 13/03/2019, 03h56

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

**NoSmoking** · 13/03/2019, 09h20

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

On a donc simplement :

Code html :

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

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

Evenement et saisie automatique d'un champ Input

JavaScript

Discussions similaires

Partager

Partager