vendredi 22 juillet 2011

Vider automatique un input type text avec jquery

Encore une petit bidouille jquery ce soir, parce que j'aime assez ça.

Il faut commencer par créer la function, qu'on appelera automatiquement lors du chargement de la page


function initFormsInputs()
{

Il faut commencer par récupèrer chaque input avec la class text, ce sont ceux que l'ont veut "vider" automatiquement quand on clique dedans (champ de recherche, de login...)

$("input.text").each(function(){

La value de l'input  est stockée dans l'élément grâce à la fonction .data() de jquery.

var storedValue = $(this).attr("value");
$(this).data("value", { datavalue : storedValue });

Lorsqu'on prend le focus sur l'élément on teste si la value est égale à la value stockée précédement, si c'est le cas, on vide de force la value

$(this).focus(function(){
if ($(this).val() == storedValue) 
{
$(this).val('');
}
});

Et maintenant on passe au blur (quand on quitte le champ sélectionné)
On récupère la value stockée, puis on vérifie que la value est vide (que l'utilisateur n'a pas entré de texte), dans le cas où le champ est vide, on restore la value stockée.

$(this).blur(function(){
var restoredValue = $(this).data("value").datavalue;

if ($(this).val() == '') 
{
$(this).val(restoredValue);
}
});
})
}


Et voilà, c'est assez simple et après plusieurs tests ça me semble assez bien fonctionner. Surtout qu'on ne rajoute aucuns éléments html et que le script fonctionne sur tous les input désigné par la class css choisie.

le code complet  :

function initFormsInputs()
{
$("input.text").each(function(){
var storedValue = $(this).attr("value");
$(this).data("value", { datavalue : storedValue });
$(this).focus(function(){
if ($(this).val() == storedValue) 
{
$(this).val('');
}
});
$(this).blur(function(){
var restoredValue = $(this).data("value").datavalue;
if ($(this).val() == '') 
{
$(this).val(restoredValue);
}
});
})
}

Allez, bonne nuit !

Edit : avec un retour de mon collègue Olivier on peut retrouver sur jsfiddle le code fonctionnel avec une petite modification et une autre technique utilisant la balise title :

http://jsfiddle.net/oilvier/vNdD7/

jeudi 21 juillet 2011

soucis de Formulaires dans Chrome et Safari ?

Lorsqu'un designer ou un client un peu pointilleux vient vous chatouiller sur les formulaires dans chrome ou safari, avant de l'envoyer sur les roses, il y a deux petites choses

Pour supprimer l'affichage de la bordure jaune (dans chrome) ou bleue (dans safari) qui apparaît lors du focus il suffit d'ajouter en css un outline:none; sur le champ incriminé.

De la même façon Chrome (uniquement) enregistre parfois des logins et mot de passe dans le navigateur qu'il réutilise automatiquement sur des champs login et mot de passe. Sauf qu'il y ajoute un superbe fond jaune très disgracieux et qui est souvent très différent de la charte du site.
Mais grâce à un astucieux code jquery (il y a un équivalent mootools que j'ajouterais rapidement) on peut
empêcher l'affichage de ce fond.


if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}

C'est tout pour aujourd'hui.

mercredi 20 juillet 2011

jquery Nivo Slider memory trick

Quand on cherche un chouette slider jquery avec des images et des liens, Nivo arrive vite sur le haut du panier.

http://nivo.dev7studios.com/

Et c'est un slider vraiment intéressant, avec des effets sympas et un fonctionnement assez simple.
Sauf que quand on en charge plusieurs sur la page ça devient vite un peu lourd.

Alors avec jquery il y a une feinte sympa pour éviter de charger inutilement le navigateur avec le slider nivo qui tourne en tâche de fond, il suffit d'ajouter deux petites fonctions dans l'appel du slider :

$(window).blur(function() {
             $('#nivo').data('nivoslider').stop();
});
$(window).focus(function() {
                $('#nivo').data('nivoslider').start();
});

La première ligne permet de stopper le slider quand on quitte la fenêtre (retour sur windows ou changement de tab).
Et la seconde le relance quand on revient sur le site.

Voilà et ça fonctionne avec presque tous les scripts. Au final c'est simple et plutôt user-friendly (la ram de nos bécanes vous remerciera.