Discussion :

[Lucille94]

Bonjour,

J'ai une appli qui contient une div éditable, dans laquelle un utilisateur peut écrire du texte et le mettre en forme. Cette div a une largeur et une hauteur fixe à ne pas dépasser.
Pour limiter en largeur, j'ai géré ça en CSS avec un max-width et un word-wrap: break-word;

Pour limiter le texte en hauteur, j'ai beaucoup plus de mal...
J'ai trouvé une bonne solution en bloquant l'evenement keydown si offsetHeight < scrollHeight

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$("#editeur").on("keydown", function(e){
	var element = this;
	if ((element.offsetHeight < element.scrollHeight)) {
	    e.preventDefault();
	}
});

Malheureusement, cela ne me permet pas d'annuler la frappe la première fois que le texte va dépasser. Je m'explique : si j'arrive à la limite de la div et que je tape "Entrée" pour faire un saut de ligne, au passage dans la fonction, l'évènement ne sera pas annulé puisqu'à ce moment là (avant que le saut de ligne ne soit effectif), le texte ne dépasse pas encore. Ce n'est qu'au caractère suivant frappé que les évènements seront annulés, et je n'ai plus non plus la possibilité de modifier le texte existant puisque je serai toujours dans le cas où element.offsetHeight < element.scrollHeight

Je voudrais donc trouver un moyen, si cela existe, d'aller au bout de l'évènement keydown (ou keypress?), de controler la différence entre offsetHeight et scrollHeight puis d'annuler l'évènement si cela ne va pas.

J'ai bien essayé de stocker dans une variable js le dernier évènement pour pouvoir le supprimer ensuite mais cela ne fonctionne pas.

Quelqu'un peut-il m'aider?

Par avance, merci, et bonne journée.

[Christophe P.]

Bonjour,

je vois deux possibilités :
1. Avant : vous pouvez bloquer la touche entrée si element.offsetHeight < element.scrollHeight moins "je ne sais pas combien".
2. Après : vous supprimer le dernier caractère ("entrée) du texte de la div.

[Invité]

Bonjour,

...Cette div a une largeur et une hauteur fixe à ne pas dépasser...

Quel est le but de la manoeuvre ?

Car "largeur et hauteur fixe" ne veulent pas dire grand chose sur un site/appli "responsive".

• Est-ce le nombre de caractères affichés (hors balises HTML) qui compte ?
• Le "volume" de caractères ? (dû aux balises HTML : avec mise en forme, saut de ligne,...) ?
• est-ce donc un textarea avec Wysiwyg (permettant une mise en forme HTML) ? ou pas ?
• ...

Enfin : pourquoi vouloir "empêcher le texte de dépasser" ?

[SylvainPV]

Généralement on cherche plutôt à limiter le nombre de caractères et non la taille qu'ils occupent (ce qui est la même chose pour les polices de caractères à chasse fixe ou monospace). L'attribut maxlength de textarea sert à ça.

Comme l'explique jreaux62, limiter par la taille n'a pas beaucoup de sens puisque la taille d'un texte dans un bloc donné peut changer pour plein de raisons: niveau de zoom du navigateur, taille de l'écran, police plus grande pour les déficients visuels, police ou interligne personnalisé...

[Lucille94]

Bonjour,

Merci pour vos réponses.

Oui il s'agit bien d'une fonctionnalité d'édition WYSIWYG. L'utilisateur personnalise d'abord la taille de son bloc de texte en cm et écrit son texte. Il peut en changer la taille, la police, le style, la couleur, l'alignement, ... La zone éditable est une div (contentEditable=true) et pas un textArea. Les modifications sur le texte sont réalisées avec execcommand. L'interface ressemble assez à ce que l'on a quand on créé un nouveau message sur ce forum. Le but étant d'imprimer le tout, c'est pour cela que je ne veut pas que ça "dépasse".

Il y a donc plusieurs façons pour le texte de déborder en hauteur : ajout d'un caractère, saut de ligne, changement de taille de texte, changement de police, passage en gras.
Pour les 2 premières façons, j'essaye de contrôler ce qui se passe avec l'évènement keydown. Pour le reste, j'ai vu qu'il existait la commande 'undo', mais je n'ai pas encore creusé plus que ça.

1. Avant : vous pouvez bloquer la touche entrée si element.offsetHeight < element.scrollHeight moins "je ne sais pas combien".
2. Après : vous supprimer le dernier caractère ("entrée) du texte de la div.

La solution de Christophe P. me semble assez proche de ce que j'avais en tête, tout le problème étant de mesurer ce "je ne sais pas combien".

Bonne journée à tous.

[SylvainPV]

Il y a aussi la possibilité de mettre un max-height et un overflow:hidden. Cela n'empêchera pas l'utilisateur de saisir du texte, mais le fait qu'il ne puisse pas le voir à l'écran devrait le dissuader d'aller au delà de la taille de la case.

[Lucille94]

Oui bien sûr, mais comme je souhaite récupérer le html pour l'intégrer dans d'autres applications, il faudrait que je puisse récupérer seulement la partie "visible".

Donc, il n'y a pas moyen d'annuler un évènement une fois réalisé?