Logo Mon Club Elec

jQuery : Un clic bouton modifie un textarea

jQuery est une bibliothèque JavaScript très populaire qui permet aux développeurs web de créer des sites web interactifs et dynamiques. Elle offre une variété de fonctionnalités qui peuvent être utilisées pour créer des sites web plus intuitifs et conviviaux. Dans cet article, nous allons voir comment jQuery peut être utilisé pour modifier le contenu d’un textarea en un seul clic sur un bouton. Nous verrons comment cette fonctionnalité peut être implémentée et comment elle peut être utilisée pour améliorer l’expérience utilisateur.

jQuery : Un clic bouton modifie un textarea

jQuery : Un clic bouton modifie un textarea

Téléchargement

Ce que l’on va faire ici

  • Dans ce code jQuery intégré dans une page HTML, un clic bouton ajoute du texte à un champ texte.

Le code HTML + jQuery

<!DOCTYPE HTML>

        <!– Debut de la page HTML  –>
         <html>

                <!– Debut entete –>
                <head>

                        <meta charset=« utf-8 » /> <!– Encodage de la page  –>
                        <title>Titre</title> <!– Titre de la page –>

                        <script src=« http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js »></script>

                        <!– Debut du code Javascript  –>
                        <script language=« javascript » type=« text/javascript »>
                        <!–

                                var compt=0

                                $(document).ready(function(){

                                        $(« #button »).click(function(){

                                                compt=compt+1
                                                $(« #textarea »).append(« Clic bouton « +compt+« \n« );
                                                textarea.setSelectionRange(textarea.selectionEnd1,textarea.selectionEnd1); // se place a la fin -1 pour avant saut de ligne

                                        }); // fin $(« #myButton »).click

                                });  // fin $(document).ready          

 

                        //–>
                        </script>
                        <!– Fin du code Javascript –>    

                </head>
                <!– Fin entete –>

         <!– Debut Corps de page HTML –>
        <body >

                        <button id=« button »>Click me !</button>
                        <br />
                        <textarea id=« textarea »></textarea>

                </body>
                <!– Fin de corps de page HTML  –>

         </html>
         <!– Fin de la page HTML  –>

 

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.