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é?

[SylvainPV]

Sémantiquement la question n'a pas de sens, s'il est réalisé c'est qu'il n'a pas été annulé.

Une autre approche serait de garder en mémoire l'ancienne valeur avant l'évènement et de la réappliquer en cas de dépassement:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var oldValue="";
$("#editeur").on("keydown", function(e){
	var element = this;
	if ((element.offsetHeight < element.scrollHeight)) {
	    e.preventDefault();
            element.textContent = oldValue;
	}
        oldValue = element.textContent; // ou 'value' si input
});

[Lucille94]

Merci SylvainPV! ça me semble être une bonne approche, je m'en veux de ne pas y avoir pensé. Pour mon cas, je dois juste conserver le html (puisque c'est bien la mise en forme qui m'intéresse au final).
Seulement j'ai toujours le soucis de "décalage", puisque je ne détecte le dépassement de texte qu'à la frappe suivante.

L'idéal serait de rajouter un évènement "change" sur ma div éditable pour contrôler, à chaque changement, si le texte dépasse et dans ce cas remplacer par la valeur précédente.
J'ai regardé vite fait sur le net, ça n'a pas l'air bête comme chou de mettre un "change" sur une div!

Je planche là dessus cet après midi et j'espère poster ma solution très bientôt.

[Invité]

Bonjour,

remplacer .on("keydown"...) par .on("keyup"...) ou .on("change"...) ?

[Lucille94]

Bon je pense que j'arrive au bout!

Effectivement, grâce à l'évènement keyup, je peux exécuter une fonction de vérification après la modification du texte.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var editHtml = "";
$("#editeur").on("keydown", function(e){
	editHtml = $("#editeur").html();
});
$("#editeur").on("keyup", function(e){
	checkText();
});
var checkText = function(){
	var element = $("#editeur");
	if ((element[0].offsetHeight < element[0].scrollHeight)) {
		element.html(this.editHtml);
	}			
}

Et ça fonctionne comme je voulais! C'était pas si compliqué en fait ...

J'ai aussi découvert l'évènement on('input'), qui est encore mieux que keyup puisqu'il détecte tous les changements dans la div éditable : frappe au clavier, collé avec la souris, ... Malheureusement, ça ne fonctionne pas avec IE !
https://developer.mozilla.org/en-US/...b/Events/input

En tout cas merci à tous pour votre aide !

[SylvainPV]

Effectivement, j'aurais dû mentionner l'évènement "input", c'est le plus approprié ici.

Un duo input/keyup devrait te donner un résultat satisfaisant.

[Invité]

Merci de penser à les messages qui t'ont aidé

Et clique sur (ci-dessous) si c'est le cas.