11548 sujets

JavaScript, DOM et API Web HTML5

Reccupérer nombre caractère max

Bonjour à tous,

Je développe une appli pour mon travail. En gros nous avons plein d'images de même dimension. Sur ces images nous venons insérer une zone de texte <p>, en récupérant les coordonnées de 2 points (Haut gauche et bas droit) que l'utilisateur renseigne. Ces zone de textes n'ont jamais la même position et n'ont jamais les mêmes dimensions. Pour chacune de ces images j'ai une zone de saisit <textarea> qui me permet de remplir la zone <p> sur l'image en live grâce au code :
document.getElementById("result").innerHTML = text;


'text' étant le texte que j'inscris dans le textarea et 'result' étant le <p>.
Mon problème est de savoir comment fixer un nombre maximum de caractère au textarea afin que le texte rentré dans la zone <p> ne déborde pas.

Avez-vous des idées???
Merci d'avance pour l'aide que vous pourrez me fournir
Benjamin FROLICHER
Bonjour,

Il y a plusieurs solutions. Une d'elles serait de ne pas limiter la taille du texte saisi, mais d'ajouter un ascenseur à l'élément qui accueille le texte. Cela se fait en CSS:
<p style="overflow: auto;" id="result"></p>
En faisant ainsi, le navigateur ajoutera un ascenseur si une partie du texte dépasse.

Sinon, tu peux en effet limiter la taille du texte saisit, mais ça se complique un peu. Avec cette fonction Javascript (qui peut largement être améliorée), je limite la taille de ma zone de texte à 160 caractères (c'était pour un envoi de SMS):
var oldString = "";
function countChars(d){
  if (document.getElementById('message').value.length> 160) {
    document.getElementById('message').value = oldString;
  } else {
    oldString = document.getElementById('message').value.substring(0,160);
  }
}
Et au niveau du textarea, il faut appeler cette fonction chaque fois que l'utilisateur appuie sur une touche (là encore, ça peut sûrement être optimisé):
<textarea  onKeyUp="countChars(event)" onKeyPress="countChars(event)" onKeyDown="countChars(event)" name="message" id="message">

Par contre, reste à déterminer quelle doit être le nombre maximal de caractères (à la place du 160); comme tes paragraphes <p> sont de dimensions variables, ça va être coton d'estimer le nombre de caractères qui correspond... Smiley rolleyes
Bonsoir,

Merci pour la réponse, mais il ne met pas possible d'utiliser cette solution car, je n'ai pas la possibilité d'utiliser un ascenseur. Je m'explique par un exemple: l'image que j'affiche est extraite d'un programme, une screenshot quoi. Dans ce programme la zone de texte affiché n'est pas extensible, il y'a donc une limite de caractère à ne pas dépassé. Ne connaissant pas ce nombre limite (car dépend de la police, et de la dimension de la zone de saisie du programme), je ne peux pas limiter le nombre max de caractère.

En revanche j'ai pensé à une solution , Je connais la police que j'utilise (pas dans le programme mais sur dans la zone de saisie) ainsi que les dimensions de ma zone, serait-il possible de déterminer la largeur et la hauteur en pixel d'un caractère? Avec ces valeurs, je pourrais calculer le nombre de caractère max.

Je peux apporté plus de précisions si ce n'est pas assez clair avec des images
bentsen a écrit :
serait-il possible de déterminer la largeur et la hauteur en pixel d'un caractère?

Hum... dans l'absolu, non. Surtout si tu prends en compte le fait que l'utilisateur peut redimensionner le texte après chargement de la page, ou peux configurer son navigateur pour utiliser une taille par défaut différente de la convention utilisée par la plupart des navigateurs, ou peut forcer une taille de texte minimale, voire forcer une taille de texte tout court.

Dans la pratique, comme une majorité d'utilisateurs ne fera rien de tout ça, tu peux toujours essayer. Récupérer la hauteur n'est pas compliqué: tu fixes le font-size en pixels (pas bien... mais c'est pour la démonstration), tu fixes en line-height également, et paf tu sais quelle est la hauteur de chaque ligne (enfin, s'il n'y a pas d'image ou d'élément SUP dedans, ou autre petite subtilité).

Pour la largeur, avec une fonte à largeur variable (la plupart), ça va pas être possible. Avec une fonte en largeur fixe, par contre, ça peut se faire. Il faudra calculer ça par des tests manuels parce que ça ne peut pas être récupéré automatiquement (à ma connaissance). Et il faudra faire attention au mode de lissage du texte, qui peut faire varier les résultats.

Pour l'option barre de défilement, je ne vois pas pourquoi ça ne serait pas applicable ici. L'explication que tu donnes, au lieu de démontrer que cette solution n'est pas intéressante, démontre au contraire qu'elle serait utile! J'ai dû louper un chapitre.

Je ferais les choses ainsi:

1. Déterminer empiriquement quel est le nombre de caractères maximum dans 90% des cas (sous réserve que les boites ne changent pas de dimensions de manière trop extrême...).
2. Limiter la saisie à ce nombre de caractères. Soit avec une limitation ferme, soit avec un avertissement que «attention, c'est trop long, poil au menton».
3. Afficher le texte dans la boite. Youpla.
4. Utiliser overflow:auto, au cas où le texte dépasse on aura alors une barre de défilement pour y accéder. Moins glamour, mais efficace, et acceptable si ça reste ponctuel.
Sujet clos
Aller à