Rajouter un peu d'interactivité est très abordable avec Mootools et son objet Fx.Styles. Quelques lignes peuvent permettre de rajouter un effet progressif de changement de couleur, ainsi qu'un léger effet élastique d'agrandissement sur les champs du formulaire.


Pour effectuer cette opération, il faut découper notre développement en trois étapes:

  • Déclaration et initialisation des variables,
  • Initialisation de l'objet Fx.Styles,
  • On attribue les gestionnaires d'évènement,


Présentation du code source:


window.addEvent('domready', function(){
        ////////////////////////////////////////////////////
        // On déclare les variables
        var type = 'text';
        var duree = 2000;
        var widthIn = '200px';
        var widthOut = '150px';
        var colorIn = '#333333';
        var colorOut = '#CCCCCC';
        var bgIn = '#CCCCCC';
        var bgOut = '#1E1E1E';
       
        //////////////////////////////////////
        // On boucle sur tout les éléments du formulaire
        var input = $$('#formulaire '+type);
        input.each(function(element) {

           // On initialise l'objet Fx.Styles
            var fxInput = new Fx.Styles(element, {
                duration:duree,
                wait:false,
                transition: Fx.Transitions.Back.easeOut
            });

            // On attache le gestionnaire d'évènement 'focus'
            $(element).addEvent('focus', function(e) {
                e = new Event(e).stop();
                alert('okai');
                fxInput.start({
                    'width': widthIn,
                    'color': colorIn,    
                    'background-color': bgIn
                });
            });

            // On attache le gestionnaire d'évènement 'blur'
            $(element).addEvent('blur', function(e) {
                e = new Event(e).stop();
                fxInput.start({
                    'width': widthOut,     
                    'color': colorOut,   
                    'background-color': bgOut
                });
            });
        });
    });