jQuery.inputfocus 1.2

This entry was posted on September 26th, 2011 and is filed under jQuery.

Benvenuto! Se &egrave; la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.Powered by WP Greet Box WordPress Plugin

E’ davvero tantissimo tempo che non scrivo più su questo blog. Impegnandomi a riprenderne la pubblicazione con frequenza, presento un aggiornamento di un vecchio plugin per jQuery che avevo rilasciato qualche anno fa: jQuery.inputfocus.

Grazie a questo plugin è possibile evidenziare i campi di input e le textarea quando si digita al loro interno. Se avete iniziato ad avere una certa dimistichezza con HTML5, in pratica, questo plugin realizza l’effetto placeholder introdotto nella versione 5.

jQuery.inputfocus 1.2

Rispetto alla versione rilasciata in precedenza è stata effettuata una modifica molto importante; mentre in precedenza era necessario passare SEMPRE come parametro il valore di default del campo, in questa nuova versione se esso non è presente verrà preso il valore contenuto all’interno del campo value.

Come nella versione precedente attraverso l’utilizzo di una classe (chiamata focus di default ma anch’essa personalizzabile) è possibile assegnare delle regole CSS a seconda che si sia verificato l’evento focus o blur sul campo.

Utilizzare il plugin è davvero molto semplice; nel codice sottostante possiamo vedere alcuni esempi:

$('input[type=name], textarea').inputfocus();
$('#name').inputfocus({value: "Il tuo nome"});
$('#name').inputfocus({
    value: "Il tuo nome",
    focus_class: "focusclass"
});

Per chi fosse interessato al codice sorgente, ecco qui il listato:

(function($){
$.fn.inputfocus = function(params) {

    params = $.extend({
        focus_class: 'focus',
        value: ''
    }, params);

    return this.each(function(){
        var t   = $(this),
        p   = params,
        val = p.value ? p.value : t.val();

        t.data('value',val)
         .bind('focus', function(){
             t.addClass(p.focus_class);

             if(t.val()==t.data('value')) {
                 t.val('');
             }
          })
         .bind('blur', function(){
             t.removeClass(p.focus_class);

             if(!t.val()) {
                 t.val( t.data('value') )
             }
          });
    });
};
})(jQuery);

Demo e Download

E’ possibile scaricare il pacchetto contenente lo script (disponibile anche in formato minimizzato) ed un file di esempio oppure visualizzare la demo online ai seguenti link:

Live Demo Download inputfocus 1.2