JQuery / WordPress: Aggiungere valore placeholder a form filed e rimuovere / ripristinare placeholder on “Focus”

July 14th, 2014

Creare un file “custom.js” copiare e incollare il codice sottostante :

function footerForm(){

var $j = jQuery.noConflict(); // No conflict per wordpress

$j(‘.ft_nome input’).attr(‘placeholder’,’Nome’); // Aggiungo il placeholder al campo “nome” ( ripetere l’operazione per tt i campi a cui si desidera aggiungere placeholder )

$j(“.content-info .wpcf7-form input”).each(function() { // Creo una funzione ripetuta per tt i campi che compongono il form
$j(this).data(‘holder’,$j(this).attr(‘placeholder’)); // Registro il valore del placeholder
$j(this).focusin(function(){ // Assegno l’azione al focusIn
$j(this).attr(‘placeholder’,”);
});
$j(this).focusout(function(){ // Ripristino il valore iniziale al focusOut
$j(this).attr(‘placeholder’,$j(this).data(‘holder’));
});
});

$j(“.content-info .wpcf7-form textarea”).each(function() { // Ripeto l’operazione per la textarea
$j(this).data(‘holder’,$j(this).attr(‘placeholder’));
$j(this).focusin(function(){
$j(this).attr(‘placeholder’,”);
});
$j(this).focusout(function(){
$j(this).attr(‘placeholder’,$j(this).data(‘holder’));
});
});

}

 

Nel footer del mio template dovrò richiamare :

<script type=”text/javascript”>

var $j = jQuery.noConflict();

$j(document).ready(function($) {
footerForm();
});
</script>

 

Questo è tutto.