input : hover, focus, largeur dynamique pas génial
Bonjour,
Je cherche à obtenir un comportement spécifique pour les champs input de mes formulaires :
- avoir une couleur de fond identique au contexte (une cellule de tableau qui le contient).
- avoir un fond gris au survol pour montrer que c'est un champ éditable (il y a des inputs non éditable dans mon formulaire).
- avoir un fond blanc quand on saisie du texte dedans.
- avoir une largeur qui s'adapte au texte.
J'ai plus ou moins réussi en javascript pur avec dans mon css :
Code:
1
2
| input:not([readonly]):focus{background-color: #fff}
input:not([readonly]):hover{background-color: #ddd} |
mais ça ne fonctionne pas sous IE9, et il serait mieux que je capture la couleur initiale et que je change ensuite avec du js.
+ un script javascript adapté d'un code donné ici (merci à son auteur) pour faire varier la largeur à la saisie avec onkeyup="adapterLargeur(this); dans le html, mais aussi pour adapter la largeur au chargement de la page :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
function adapterLargeur(elemt){
/*
* Adapte la largeur des INPUTs au texte inscrit dedans
*/
var ndfontsize, ndfontfamily, ndfontstyle, ndfontweight;
var tt = elemt.value;
//
document.styleSheets[1].cssRules : document.styleSheets[1].imports;
// lecture des propriétés du texte
var sheet=document.styleSheets[1];
if ('cssText' in sheet) { // Internet Explorer
ndfontsize = elemt.currentStyle.fontSize;
ndfontfamily = elemt.currentStyle.fontFamily;
ndfontstyle = elemt.currentStyle.fontStyle;
ndfontweight = elemt.currentStyle.fontWeight;
}
else { // Firefox, Opera, Google Chrome and Safari
ndfontsize = getComputedStyle(elemt, null).fontSize;
ndfontfamily = getComputedStyle(elemt, null).fontFamily;
ndfontstyle = getComputedStyle(elemt, null).fontStyle;
ndfontweight = getComputedStyle(elemt, null).fontWeight;
}
//
// Création puis destruction d'un DIV avec les même caractéristiques pour en connaître la longueur en pixel
var container=document.createElement("div");
container.style.visibility="hidden";
container.style.fontFamily=ndfontfamily
container.style.fontSize=ndfontsize
container.style.fontStyle=ndfontstyle
container.style.fontWeight=ndfontweight
container.id="magicdiv";
container.style.display="inline";
document.body.appendChild(container);
document.getElementById("magicdiv").innerHTML=tt;
var longueur = document.getElementById("magicdiv").offsetWidth;
document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'));
//
// Fixation de la longueur du champ input
elemt.style.width=(longueur+5)+"px";
} |
Mais voilà, ça ne fonctionne pas bien avec tout les navigateurs. J'ai commencé à regarder en jquery (mais pour l'instant je ne maîtrise pas).
Auriez vous une idée de quelque chose de plus élégant et qui fonctionne avec tout les navigateurs ? même en jquery à titre pédagogique...
Si tout pouvez être en js ça serait plus clair notamment, car là, j'ai un bout dans le html, le css, le js...
