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.