HTML attribut d'événement oninput

L'attribut HTML oninput : définition

L'attribut oninput est utilisé pour définir une action qui sera déclenchée lorsque la valeur d'un élément de formulaire change. Cet attribut est principalement utilisé avec les éléments de saisie tels que les champs de texte (<input type="text">), les zones de texte (<textarea>), et les éléments de type range (<input type="range">).

Syntaxe

La syntaxe de base de l'attribut oninput est la suivante :

    <element oninput="maFonction()">

où maFonction() est la fonction JavaScript que vous souhaitez exécuter lorsque la valeur de l'élément change.

Exemples pratiques d'utilisation

Voici quelques exemples pratiques d'utilisation de l'attribut oninput:

Exemple 1 : exemple simple d'utilisation pour afficher la valeur d'un champ de texte en temps réel

Ce code est un exemple simple d'utilisation de l'attribut `oninput` pour déclencher une fonction JavaScript lorsqu'un utilisateur saisit du texte dans un champ de texte. Il met également à jour le contenu d'un élément HTML avec le texte saisi. Voici le code commenté :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: oninput Function</title>
</head>
<body>

    <p>Écrivez quelque chose dans le champ de texte pour déclencher une fonction.</p>

    <!-- Champ de texte avec l'attribut oninput -->
    <input type="text" id="myInput" oninput="maFonction()">

    <!-- Paragraphe où le résultat sera affiché -->
    <p id="demo"></p>

    <!-- Script JavaScript -->
    <script>
        // Fonction appelée lors de la saisie dans le champ de texte
        function maFonction() {
            // Récupérer la valeur du champ de texte
            let x = document.getElementById("myInput").value;

            // Mettre à jour le contenu de l'élément avec l'ID "demo"
            document.getElementById("demo").innerHTML = "Vous avez écrit: " + x;
        }
    </script>

</body>
</html>

Lorsque vous ouvrez ce code dans un navigateur, un champ de texte s'affiche, et lorsque vous saisissez du texte, la fonction `myFunction` est déclenchée, et le paragraphe avec l'ID "demo" est mis à jour pour afficher "Vous avez écrit: " suivi du texte saisi. C'est un excellent exemple pour comprendre le fonctionnement de l'attribut `oninput` en action.

Exemple 2 : Mettre à jour la taille d'une zone de texte en fonction de sa valeur

Ce code utilise l'attribut oninput pour appeler la fonction ajusterTaille dès qu'il y a une saisie dans la zone de texte. La fonction ajusterTaille ajuste ensuite la hauteur de la zone de texte en fonction de son contenu, en utilisant la propriété scrollHeight. Voici le code commenté :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: Auto-Adjust Textarea Height</title>
    <style>
        /* Styling pour rendre la zone de texte plus visible */
        textarea {
            width: 300px;
            resize: none; /* Désactiver le redimensionnement manuel */
            overflow-y: hidden; /* Cacher la barre de défilement verticale */
        }
    </style>
</head>
<body>

    <!-- Zone de texte avec l'attribut oninput -->
    <textarea oninput="ajusterTaille(this)"></textarea>

    <!-- Script JavaScript -->
    <script>
        // Fonction appelée lors de la saisie dans la zone de texte
        function ajusterTaille(element) {
            // Ajuster la hauteur en fonction du contenu (scrollHeight)
            element.style.height = (element.scrollHeight) + "px";
        }
    </script>

</body>
</html>

Dans cet exemple, la zone de texte a une largeur fixe de 300 pixels, et le redimensionnement manuel est désactivé. La fonction ajusterTaille est appelée à chaque fois qu'il y a une saisie dans la zone de texte, et elle ajuste la hauteur de la zone de texte en fonction de la hauteur du contenu (utilisant scrollHeight). Cela permet à la zone de texte de s'ajuster dynamiquement à mesure que l'utilisateur saisit du texte.

Voici une version modifiée du code ci dessus

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: Auto-Adjust Textarea Height</title>
    <style>
        /* Styling pour rendre la zone de texte plus visible */
        textarea {
            width: 300px;
            resize: none; /* Désactiver le redimensionnement manuel */
            overflow-y: hidden; /* Cacher la barre de défilement verticale */
        }
    </style>
</head>
<body>
<p> Tapez du texte, et qu'il soit très long pour constater l'effet </p>
    <!-- Zone de texte avec l'attribut oninput -->
    <textarea oninput="ajusterTaille(this)" onkeydown="ajusterTaille(this)"></textarea>

    <!-- Script JavaScript -->
    <script>
        // Fonction appelée lors de la saisie dans la zone de texte ou lors de l'appui sur une touche
        function ajusterTaille(element) {
            // Ajuster la hauteur en fonction de la hauteur totale moins la hauteur visible
            element.style.height = "auto"; // Réinitialiser d'abord la hauteur à "auto"
            element.style.height = (element.scrollHeight) + "px";
        }
    </script>

</body>
</html>

Conseils et astuces

Voici quelques conseils pour tirer le meilleur parti de l'attribut oninput:

Utilisez this.value pour accéder à la valeur actuelle de l'élément.
Évitez d'effectuer des opérations coûteuses à l'intérieur de la fonction oninput pour éviter des ralentissements.