[astuce] input:focus

Messagepar angie » Ven 04 Aoû 2006, 03:38

hello !!!

Une petite astuce pour ceux que ca intéresse bien évidemement.
Que je viens de réaliser, alors j'en fait profiter tout le monde !

Dans un formulaire dans le but de le rendre plus ergonomique !
Colorez l'element input quand il obtient le focus de l'utilisateur.

Il y avait juste un problème.
IE ne prend pas en charge le focus, donc on est obligé de faire un javascript pour ce navigateur.
Voici le code à insérer dans le fichier include/general.js
Code: Tout sélectionner
//prise en charge du focus par IE
function init(){
 if(document.getElementsByTagName("input")){
   for(i=0;i<document.getElementsByTagName("input").length;i++){
     document.getElementsByTagName("input")[i].onfocus=colour;
     document.getElementsByTagName("input")[i].onblur=none;   
   }
 }
}
//Couleur du focus
function colour(event){
 this.style.backgroundColor='#eee';
 this.style.border='#27A6BA 1px solid';
}
//Pas de couleur
function none(event){
 this.style.backgroundColor='';
 this.style.border='#CCC 1px solid';
}
window.onload=init;

Adapter la couleur à votre charte graphique biensûr !

Sinon pour firefox ajouter ceci dans la feuille de style de votre template :
Code: Tout sélectionner
input {background:#FFF;}
input:focus {background:#EEE;border:#27A6BA 1px solid;}
angie
Membre actif
 
Messages: 14
Inscription: Jeu 29 Sep 2005, 00:24

Messagepar sidarus » Sam 05 Aoû 2006, 13:57

[sticky] :)

Le wiki t'attend ;)
sidarus
Membre très actif
 
Messages: 396
Inscription: Mar 03 Mai 2005, 23:34
Localisation: Geneva (CH)


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron