Sujet Précédent Sujet Suivant

Taille d'une chaine de caractere en pixel

Résolu
mchab Messages postés 6 Date d'inscription vendredi 3 mars 2006 Statut Membre Dernière intervention 11 mai 2007 - 3 mars 2006 à 17:38
polemoss Messages postés 5 Date d'inscription mardi 21 novembre 2006 Statut Membre 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 !

10 réponses

Réponse 1 / 10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
7 mars 2006 à 12:44
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)
3
Réponse 2 / 10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
7 mars 2006 à 08:26
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)
0
Réponse 3 / 10
mchab Messages postés 6 Date d'inscription vendredi 3 mars 2006 Statut Membre Dernière intervention 11 mai 2007
7 mars 2006 à 10:49
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 !
0
Réponse 4 / 10
mchab Messages postés 6 Date d'inscription vendredi 3 mars 2006 Statut Membre Dernière intervention 11 mai 2007
7 mars 2006 à 10:49
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 !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
mchab Messages postés 6 Date d'inscription vendredi 3 mars 2006 Statut Membre Dernière intervention 11 mai 2007
7 mars 2006 à 12:37
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 !!!!
0
Réponse 6 / 10
polemoss Messages postés 5 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 2 avril 2008
4 mai 2007 à 17:52
Salut

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

;)
0
Réponse 7 / 10
mchab Messages postés 6 Date d'inscription vendredi 3 mars 2006 Statut Membre Dernière intervention 11 mai 2007
11 mai 2007 à 14:35
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>
0
Réponse 8 / 10
polemoss Messages postés 5 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 2 avril 2008
11 mai 2007 à 15:00
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
0
Réponse 9 / 10
mchab Messages postés 6 Date d'inscription vendredi 3 mars 2006 Statut Membre Dernière intervention 11 mai 2007
11 mai 2007 à 15:11
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)
0
Réponse 10 / 10
polemoss Messages postés 5 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 2 avril 2008
11 mai 2007 à 15:32
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>
0

Discussions similaires

VBA - Taille d'une string
PtitGrumo -
frop01 -

6 réponses
longueur d une chaine de caractere
Don_Cagoule -
Don_Cagoule -

3 réponses
Longueur maximale string
blanchoc -
blanchoc -

14 réponses
Tronquer une chaine de caractères
CrisseTof -
CrisseTof -

2 réponses
extraction d'une partie d'une chaine dans une chaine
cs_berserk14 -
Aide -

4 réponses
Rejoignez-nous