input : hover, focus, largeur dynamique pas génial

[berlo44]

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...

[SpaceFrog]

le hover n'est crossbrowser que pour la balise a

il existe des patch htc genre whateverhover...
sinon en effet jquery (c'est pas si compliqué )
il y a tous les tutos nécessaires sur developpez. ..