Taille d'une chaine de caractere en pixel [Résolu]

Messages postés
6
Date d'inscription
vendredi 3 mars 2006
Dernière intervention
11 mai 2007
- 3 mars 2006 à 17:38 - Dernière réponse :
Messages postés
5
Date d'inscription
mardi 21 novembre 2006
Dernière intervention
2 avril 2008
- 11 mai 2007 à 15:32
Bonjour
comme le sujet le laisse prévoir, je cherche à récupérer la taille en pixel d'une chaine de caracteres affichée dans un champ input en readonly.
explication sommaire :
la saisie se fait dans un champ "saischamp", avec une police fixe, tandis que l'affichage se fait dans un autre champ "affichchamp" et est soumi éventuellement à un changement de de taille de police par l'utilisateur, tout en devant rester dans un cadre bien défini et fixe. Le but est donc de limiter la saisie en fonction du résultat affiché. attention je ne cherche pas à limiter la saisie en fonction du nombre de caractères mais bien en fonction de la taille en pixel.
merci énauuuurmément !
Afficher la suite 

Votre réponse

10 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
7 mars 2006 à 12:44
3
Merci
Salut...

Bonne démarche, je répond à la question précédente quand même
var NETSCAPE (navigator.appName "Netscape");
var Obj = document.getElementById('div_');
if(
NETSCAPE
)
Larg= Obj.offsetWidth;
else
Larg= Obj.scrollWidth;

;0)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
7 mars 2006 à 08:26
0
Merci
Amis du Jour Bonjour...

Essaies avec un DIV caché peut être...

Tu écris dans le DIV le texte saisi à la volé, avec l'événement onChange par exemple, avec le même style, et tu récupéres la largeur de cellui ci.

width:auto; visibility:hidden">

;0)
Commenter la réponse de PetoleTeam
Messages postés
6
Date d'inscription
vendredi 3 mars 2006
Dernière intervention
11 mai 2007
7 mars 2006 à 10:49
0
Merci
Merci très beaucoup énormément, j'ai commencé des tests, et j'ai deux observations :


- Comment écrire dans le
?
Je ne vois pas d'autre façon que innerHTML : d'autres idées ?
- Comment récupérer la taille du
?
j'ai essayé des trucs du genre document.getElementById('CACHE').width mais cela ne fonctionne pas (width n'est pas une propriété de
). Quant à document.getElementById('CACHE').style.width, cela retourne (forcément) auto !
Aaargh !
Commenter la réponse de mchab
Messages postés
6
Date d'inscription
vendredi 3 mars 2006
Dernière intervention
11 mai 2007
7 mars 2006 à 10:49
0
Merci
Merci très beaucoup énormément, j'ai commencé des tests, et j'ai deux observations :


- Comment écrire dans le
?
Je ne vois pas d'autre façon que innerHTML : d'autres idées ?
- Comment récupérer la taille du
?
j'ai essayé des trucs du genre document.getElementById('CACHE').width mais cela ne fonctionne pas (width n'est pas une propriété de
). Quant à document.getElementById('CACHE').style.width, cela retourne (forcément) auto !
Aaargh !
Commenter la réponse de mchab
Messages postés
6
Date d'inscription
vendredi 3 mars 2006
Dernière intervention
11 mai 2007
7 mars 2006 à 12:37
0
Merci
bon, j'ai pas mal avancé et pour l'instant pas besoin de div ni de calque !!


En fait j'utilise un input id="champaffich" pour la "réception" du texte , invisible, taille 1 caractere ou 0.
Au fur et a mesure de la saisie dans un input id="champsaisie", le champaffich s'agrandit. Il ne me reste plus qu'à récupérer sa largeur :

// copie de la saisie vers le input d'affichage
document.getElementById('champaffich').value = document.getElementById('champsaisie').value;
// agrandir la taille du input champaffich' en fonction du nombre de caractères présents
document.getElementById('champaffich').size=document.getElementById('champaffich').value.length;
// recuperer la taille du input, et en pixel !!
taille=document.getElementById('champaffich').offsetWidth;
ensuite il ne me reste plus qu'à le comparer avec une taille définie, et lancer une alerte du genre "attention dépassement"....

Bon maintenant je dois gérer ce que ça donne avec un changement de taille de police !!!!
Commenter la réponse de mchab
Messages postés
5
Date d'inscription
mardi 21 novembre 2006
Dernière intervention
2 avril 2008
4 mai 2007 à 17:52
0
Merci
Salut

Dis moi mchab tu pourai mettre un peux plus de détail sur ton script stp car il m'interesserai beaucoup merci

;)
Commenter la réponse de polemoss
Messages postés
6
Date d'inscription
vendredi 3 mars 2006
Dernière intervention
11 mai 2007
11 mai 2007 à 14:35
0
Merci
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>

<!--
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"

Affichage en fonction de la taille choisie par l'utilisateur

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

Changer la taille de la police affichée dans le champ &quot;champdaffichage&quot;

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

</html>
Commenter la réponse de mchab
Messages postés
5
Date d'inscription
mardi 21 novembre 2006
Dernière intervention
2 avril 2008
11 mai 2007 à 15:00
0
Merci
Salut,

Merci de m'avoir répondu mais j'ai fini par trouvé tout seul, mais j'ai changé ton script car prendre la taille de l'input comme tu fais c'est pas bon car tu dis que la size est égale au length pour moi c'est éronné alors peux etre a tu modifié dans ton nouveau script je ne l'ai pas encore regarder en détaille mais d'apres ce que je vois j'ai trouver un peux plus simple, j'écris dans un span et ça marche nikel,

la source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript" language="javascript">
function carcpix(field, countfield, maxlimit)
{
 
   divcache=document.getElementById("CACHE");
   divcache.innerHTML=document.getElementById('saisie').value;
      
var NETSCAPE (navigator.appName "Netscape");
var Obj = document.getElementById('CACHE');
if(NETSCAPE)
{
Larg= Obj.offsetWidth;
}
else
{
Larg= Obj.scrollWidth;
}
   
   divtaill=document.getElementById("taillediv");
   divtaill.innerHTML=Larg;
if (field.value.length > maxlimit)
{
field.value = field.value.substring(0, maxlimit);
}
else
{
countfield.value = maxlimit - field.value.length;
}
}
</script>
</head>


<form name="test">
champsaisie :



</form>



La taille de la div est de  px


</html>

et dans ton span tu choisi une police et une taille voulu et sur n'importe quel écran ça sera pareil
@ plus dis moi ce que tu en pense
Commenter la réponse de polemoss
Messages postés
6
Date d'inscription
vendredi 3 mars 2006
Dernière intervention
11 mai 2007
11 mai 2007 à 15:11
0
Merci
Essaye quand meme celui que je viens de poster, car j'y gere aussi le chgt de la taille et surtout (ce qui était mon but initial), une taille maxi (meme si lors d'un chgt de taille avec dépassement il reste encore à supprimer les carac. qui dépassent)
Commenter la réponse de mchab
Messages postés
5
Date d'inscription
mardi 21 novembre 2006
Dernière intervention
2 avril 2008
11 mai 2007 à 15:32
0
Merci
RE

J'ai bien testé ton code, seulement mon problème initial était de pouvoir géré là taille de ce que j'écrivais en temps réel et non pas de l'empecher de depasser une zone voulu. car le but était de complété avec des petits points le reste d'une ligne et égallement de géré le changement de ligne au bout de temps de caractére je vais te poster ce code il devrais pouvoir t'aider car pour toi il ne faut pas supprimer les caracteres en trop ça pourai entrainer des erreures d'inatention ou de faute de frape je ne connais pas le but final de ton appli mais le but serrai plustot d'empecher la frappe de nouveau caracter si dans ton cas on dépasse 100px.

je pense que c'est simple tu mémorise dans un champs via le javascript le texte de la frappe précédente et si tu vois que la nouvelle frappe dépasse les 100px tu met une alerte et tu affiche le texte que tu as mi du coup en mémoire dans le champ de saisie

voilà mon code avec les petits points :

<script type="text/javascript">
function carcpix()
{
divcache=document.getElementById("CACHE");
divcache.innerHTML=document.getElementById('yvert').value+" "+document.getElementById('descrip').value;

var NETSCAPE (navigator.appName "Netscape");
var Obj = document.getElementById('CACHE');
if(NETSCAPE)
{
Larg= Obj.offsetWidth;
}
else
{
Larg= Obj.scrollWidth;
}

divtaill=document.getElementById("taillediv");
divtaill.innerHTML=Larg;
var descrip = document.getElementById('yvert').value+" "+document.getElementById('descrip').value;
if(Larg<210)
{
var diff = parseInt(210) - parseInt(Larg);
var nbTours = parseInt(diff) / parseInt(2);
var nbTours = Math.round(nbTours,0);
for(i=0; i<nbTours; i++)
{
descrip = descrip+".";
}
document.forms.newproduit.descripPDF.value=descrip;
}
if(Larg>210)
{
var rapport = parseInt(Larg) / parseInt(210);
var rapportsup = Math.ceil(rapport);
var maxtotal = parseInt(210) * parseInt(rapportsup);
var diff = parseInt(maxtotal) - parseInt(Larg);
var nbTours = parseInt(diff) / parseInt(2);
var nbTours = Math.round(nbTours,0);
for(i=0; i<nbTours; i++)
{
descrip = descrip+".";
}
document.forms.newproduit.descripPDF.value=descrip;
}
divcache.innerHTML = descrip;
var NETSCAPE (navigator.appName "Netscape");
var Obj = document.getElementById('CACHE');
if(NETSCAPE)
{
Larg= Obj.offsetWidth;
}
else
{
Larg= Obj.scrollWidth;
}
divtaill.innerHTML=Larg;
}
</script>
<form name="newproduit" method="post" enctype="multipart/form-data">





<textarea name="descrip" id="descrip" cols="70" rows="7" wrap="soft" onKeyDown="carcpix();" onKeyUp="carcpix();" ></textarea>


<textarea style="visibility:hidden;"name="descripPDF" id="descripPDF" cols="0" rows="0" wrap="soft"></textarea>




La taille de la div est de px

</form>
Commenter la réponse de polemoss

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.