[Résolu] Adapter dyn. la largeur d'un input par rapport à son contenu

Bonjour à tous !

J'essai d'adapter de manière dynamique la largeur d'un input lors de la saisie de l'utilisateur. Pour expliquer le contexte, c'est un input qui s'affiche pour modifier le contenu d'une cellule d'un tableau (bref du javascript). Je poste dans ce forum car il s'agit de mise en forme et je ne m'y connais pas trop en CSS mais il doit certainement avoir une solution. J'étais parti sur l'idée (non-CSS) suivante :

<input value="test" size="4" style="font-family: courier" onkeydown="this.size=this.value.length">

Cela fonctionne plutôt bien pour la police "courier" mais pour les autres polices c'est pas trop top...

Merci d'avance et merci pour ce site de qualité aux webmestres !

Jérémy
Modifié par jah-love59 (16 Aug 2007 - 14:22)

T'as essayé le display:inline ?
Je sais pas si ca marche sur les inputs.
Modifié par Puce (16 Aug 2007 - 11:26)

Bonjour puce,

Je viens d'essayer ça ne fonctionne pas. Merci tout de même pour l'idée .
Je poursuis mes recherches et je vous tiens au courant!

Je ne vois pas de solution full css, ma première idée était de faire un truc comme ça en javascript :

<input value="test" id="inputTest" size="4" style="font-family: courier">

<script>
	function agrandir() {
		this.style.width = this.value.length+"em";
	}
	document.getElementById("inputTest").onkeydown = agrandir;
</script>

Mais ca donne des input bien trop grands...
Une idée serait de copier temporairement le contenu de l'input dans un block possèdant les mêmes définitions CSS que l'input (font-size, font-family, tout ça), noter sa largeur et la réappliquer à l'input.
Modifié par Tymlis (16 Aug 2007 - 11:47)

J'aime bien ton idée !
Je teste ça cette aprèm.

Merci Tymlis

ça marche parfaitement! merci beaucoup!
voici le code :

<script type="text/javascript">
function adapterLargeur(o){
	var div = document.getElementById('div_tmp');
	div.innerHTML = o.value;
	o.style.width = div.clientWidth+10; // + une petite marge de 10px
}
</script>

<input value="test" style="font: verdana 9px" onkeyup="adapterLargeur(this);">
<div id="div_tmp" style="position:absolute; visibility:hidden; font:verdana 9px;"></div>

Il ne reste plus qu'à adapter légèrement car au départ la largeur du input n'est pas adaptée au texte...

Merci encore!
Modifié par jah-love59 (16 Aug 2007 - 14:23)