Voici le contenu de ma page (copier coller la suite dans une page vierge html)
<!--
Rappel des faits : avoir un texte affiché qui ne dépasse pas un certaine largeur,
par exemple celle d'un calque ou d'un tableau dans lequel il sera affiché, avec au besoin un changement de taille de police.
Attention, les différentes définitions d'écran peuvent donner des résultats différents.
Prévoir donc une marge lors du test de la taille du champaffiché.
Par ailleurs, j'ai du réecrire mon script car il était devenu trop spécialisé par rapport à l'appli que j'ai développé, aussi je ne l'ai pas testé (pas le temps
en dehors d'IE 6. De toute façon, tout peut-être adapté selon vos propres besoins.
Il peut y avoir des discordances en fonction de la définition d'écran etc...
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>controle taille chaine de caractere dans zone limitée</title>
<meta name="author" content="marc chabbert - 2006-2007">
<meta name="copyright" content="marc chabbert - 2006-2007">
<script language="javascript">
function testtaillechamp(){
//fonction qui sert à tester la taille de la chaine de caractere affichée
alertetaille='';
nom_champ_in=eval(document.getElementById('champdesaisie'));
nom_champ_out=eval(document.getElementById('champdaffichage'));
// récupérer dans une variable la taille maxi à ne pas dépasser
tailleori=document.getElementById('zonetaillemaxi').style.width;
tailleori=tailleori.substr(0,tailleori.length - 2);
// copie du texte saisi vers le input d'affichage
nom_champ_out.value = nom_champ_in.value;
// agrandir la largeur (en carac) du champ d'affichage "champdaffichage" en fonction du nombre de caractères présents
// dans le champ de saisie (sinon il y a 'défilement' du texte dans le champ "champdaffichage" qui ne change alors pas de taille
nom_champ_out.size=nom_champ_out.value.length;
// recuperer la nouvelle taille du input, et en pixel (il evolue au fur et a mesure de la saisie) !!
taillechamp=nom_champ_out.offsetWidth-28;
//ensuite il ne me reste plus qu'à le comparer avec la taille maxi, et lancer par exemple une alerte du genre "attention dépassement"....
if (taillechamp>tailleori-1){
alertetaille='oui';
// enlever le dernier caractere
nom_champ_in.value=nom_champ_in.value.substring(0,nom_champ_in.value.length -1);
nom_champ_out.value = nom_champ_in.value;
// reinitialiser la taille du champ d'affichage
nom_champ_out.size=nom_champ_out.value.length;
}
return alertetaille;
}
function changetaille(){
// modifier la taille des caracteres et la taille maxi des champs
nom_champ_out=eval(document.getElementById('champdaffichage'));
// lire le select
taillepolice=eval(Number(document.getElementById('taillepol').value));
// redimensionner la police (affichage)
nom_champ_out.style.fontSize=taillepolice;
// apres un chgt de police il faut retourner vérifier la taille du champ affiché. Attention,
// plusieurs caractères peuvent alors dépasser (en fait dans le script de test seul le dernier est supprimé)
var alertetaille=testtaillechamp();
if (alertetaille=="oui"){alert('ATTENTION : La saisie est trop longue '+taillechamp+' pixels au lieu de '+tailleori+' pixels maximum\rIl faudra probablement supprimer plusieurs caractères.');}
}
</script>
</head>
<body>
<!--
Au fur et a mesure de la saisie en taille standard dans le champ de saisie (id="champsaisie"), le champ d'affichage (id="champaffichage") s'agrandit. Il ne me reste plus qu'à récupérer sa largeur en pixel (offset) :
Attention je n'ai pas indiqué de name pour les champ, ni de balise <form> donc si vous voulez récupérer les champs par exemple en php, il faudra tout mettre dans un formulaire web et rajouter name="monnom" dans les champs désirés.
C'est dans ce 1er champ qu'est effectué la saisie:
a chaque keyup (remontée des touches du clavier la fonction qui teste la taille est lancée. Je pense que cela doit également (mieux?) fonctionner avec onpropertychange
-->
Saisie en "texte brut"<br />
<input id="champdesaisie" type="text" onKeyUp="var alertetaille=testtaillechamp();if (alertetaille=='oui'){alert('ATTENTION : La saisie est trop longue '+taillechamp+' pixels au lieu de '+tailleori+' pixels maximum');}">
<br />
Affichage en fonction de la taille choisie par l'utilisateur<br />
<!--
Le 2eme champ contiendra une copie du texte saisi, en tenant compte éventuellement d'un changement de police/taille
Il est donc en lecture seule (readonly) et se trouve a l'interieur d'une zone fixe (en fait un div de 100 px que j'affiche en jaune).
Pour continuer à bien voir cette zone jaune d'affichage maxi, la couleur du input est mise en transparent.
Attention, pour que la taille de la police par defaut colle avec l'affichage par defaut de IE, je les fixe en style.
-->
<div id="zonetaillemaxi" style=" background-color:#FFFFCC;width:100px">
<input id="champdaffichage" type="text" readonly style=" font-size: font:Arial;font-size:14px;border:0;background-color:transparent;">
</div>
Changer la taille de la police affichée dans le champ "champdaffichage" <br />
<select size="1" id="taillepol" onChange="changetaille()" title="Sélectionnez la taille des caractères">
<!-- afficher les tailles - Toutes les tailles ne sont pas opérentes : dépend de la police -->
<option value="9">9</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14" selected>14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<!-- Yo! -->
</body>
</html>