Changer la couleur de fond quand on écrit dans un "input" en css

**Loptr** · 13/12/2020, 15h40

Bonjour,
Je voudrais susciter votre expérience pour savoir s'il est possible, en css, de savoir quand on écrit dans un <input type="txt"/>, pour en changer la couleur de fond (background-color).
Je m'explique, j'utilise la fonction ":active", mais ça ne correspond pas à ce que j'attend. Je voudrais que la couleur de fond change pendant qu'on écrit ou que notre curseur à sélectionné le "input".
Merci d'avance pour vos réponses.
Bonne journée.

Le code CSS :

Code:

.txt:active {
	background-color: white;
	}

Le code HTML :

Code:

<input class="txt" type="txt"/>

**Ikhar84** · 13/12/2020, 18h25

Bonsoir,

Dans quel but ?
Vérifier la saisie de l'utilisateur et indiquer par la couleur de fond l'échec, par exemple ?

Ce qu'il faut savoir, c'est qu'il s'agit d'utiliser ici JavaScript et non css pour y arriver, la seconde chose, c'est qu'il n'y a aucune persistance, au rechargement de la page, la couleur de fond reprend son "réglage" initial...

Tout d'abord, il faudra préciser un identifiant unique au champ texte afin d'y accéder facilement en JS:

Code HTML:

 <input type='text' id='id-unique'>

Ensuite, il sera facile d'accéder à cet élément via JS et d'en modifier les propriétés CSS (de style):

Code:

    // Pour afficher une couleur de fond rouge :
    document.getElementByID('id-unique').style.backgroundColor = "#ff0000";

Plus conccrétement, il faut un fichier HTML conforme à la norme HTML 5 et un fichier JavaScript (dans l'absolu, il faudrait utiliser AddEventListener au lieu du onFocusOut)...

Le fichier index.html :

Code HTML:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Background color on mouse out</title>
    
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <form action="">
            <input type="text" name="utilisateur" id="utilisateur" onfocusout="changeBgColor('utilisateur')">

            <button>Valider</button>
        </form>

        <script src="js/app.js"></script>
    </body>
</html>

Et le fichier js dans le dossier js: js/app.js:

Code:

function changeBgColor(id) {
    document.getElementById(id).style.backgroundColor = "#ff0000";
}

à toi de jouer pour réfléchir et adapter !

**Ikhar84** · 13/12/2020, 18h33

Oups... temps d'édition trop court...

Je viens de voir que tu souhaitait faire l'inverse de ce que je propose, signaler l'entrée dans le champ texte et non sa sortie...

Il suffit d'utiliser l'événement onfocusin au lieu de l'événement onfocusout:

Code HTML:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Background color on mouse out</title>
    
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <form action="">
            <input type="text" name="utilisateur" id="utilisateur" onfocusin="changeBgColor('utilisateur')">

            <button>Valider</button>
        </form>

        <script src="js/app.js"></script>
    </body>
</html>

**Loptr** · 13/12/2020, 19h40

Merci beaucoup Ikhar84 pour tes réponses, c'est exactement ce que je cherchais !
Comment fait-on pour mettre une discussion en [Résolu] ?

A voir en vidéo sur Futura · Aujourd'hui

Changer la couleur de fond quand on écrit dans un "input" en css

Changer la couleur de fond quand on écrit dans un "input" en css

Re : Changer la couleur de fond quand on écrit dans un "input" en css

Re : Changer la couleur de fond quand on écrit dans un "input" en css

Re : Changer la couleur de fond quand on écrit dans un "input" en css

Discussions similaires

"NextDNS" : site "RTL" dans l'allowlist, pourtant le "play" est bloqué ici (voir lien)

Spécialité Math ou Physique-Chimie quand on est "à l'aise" dans les deux

Changer la couleur d'une proposition d'un input avec CSS

[reptile] "regarde-moi dans les yeux quand je te parle"

Une "couleur", "race" unique dans 50 000 ans?