11524 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Textarea autosize

Bonsoir,

J'ai mis le sujet dans la section "JavaScript" mais la solution pourrait peut-être se trouver du côté de CSS...

Vous avez remarqué : lorsque vous écrivez un message sur le forum ici présent le <textarea> s'adapte automatiquement au contenu que vous êtes en train d'écrire. L'éditeur de WordPress fait de même.

Comme j'ai la flemme j'ai adopté la classe utilisé par Alsacréations, elle est très bien (".autosize"), puis je me suis fais ma petite fonction. Pour le coup je n'ai pas pris la fonction utilisé sur Alsacréations, elle fonctionne à priori très bien mais, minifiée et optimisé par un parseur JS, j'ai du mal à la comprendre et comme je voulais comprendre le principe appliqué ici... Je me suis donc créé ma propre fonction à partir de zéro :
/**
 * Ajuste la hauteur du champ par rapport au contenu
 * @param {NodeList} input Liste d'objets textarea
 */
function textareaAutosize(input) {
  const adjustHeight = () => {
    input.style.height = 'auto'
    input.style.height = `${input.scrollHeight + 6}px` // @note L'ajout de quelques pixels permet d'éviter l'affichage de la barre de défilement verticale. Un nombre magique  [decu]
  }
  window.addEventListener('load', adjustHeight)
  window.addEventListener('resize', adjustHeight)
  input.addEventListener('input', adjustHeight)
}

document.querySelectorAll('textarea.autosize').forEach(textarea => textareaAutosize(textarea))


Un pen : Textarea autosize

Mon problème est que je suis obligé d'ajouter un "nombre magique", un correctif que j'ai fixé plus ou moins arbitrairement à 6px, sinon j'ai une barre de défilement verticale et disgracieuse qui s'invite (pour rien du coup). Du coup j'ai un effet de bord : si je commence à remplir le <textarea> de manière conséquente je peux avoir un espace vide qui peut devenir important à la fin du champ. Rien de rédhibitoire... mais ça m'énerve...

Le problème est peut-être en lien avec la hauteur de ligne utilisée par la font (?), je ne sais trop...
Comment corriger le tir ?
Ah ! je viens de penser à une solution : je me contente de supprimer les scrollbars en CSS, comme ça pas de correctif JS avec effet de bord :
.autosize {
  overflow: hidden;
}

Si vous avez une autre solution...
Modérateur
Bonjour,

Un élement avec l'attribut "contenteditable" ?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
[contenteditable] {font-family:monospace;width:20em;min-height:5em;border:1px solid #000;}
</style>
</head>
<body>
<div contenteditable></div>
</body>
</html>

Amicalement,
Modérateur
Bonjour,

Ha, depuis Mars 2024 (un peu récent), on a un solution css avec textarea. Par exemple :
textarea {field-sizing:content;width:20em;min-height:5em;}

EDIT : semble ne fonctionner qu'avec Chrome pour l'instant.
EDIT : je pensais initialement que ça pouvait fonctionner avec edge et safari récents (sans pouvoir tester), mais finalement non, ça ne marche qu'avec Chrome pour l'instant.

Amicalement,
Modifié par parsimonhi (27 Mar 2024 - 09:19)
Meilleure solution
Mais c'est génial ! Merci !
Étant donné que je ne compte pas sortir mon système avant un an, un an et demi, je peux me permettre d'utiliser ce genre de solution.
gcyrillus a écrit :
Il y a aussi box-sizing:content-box; qui permet de l'éviter Smiley cligne

Ha bah oui ! C'est clairement plus élégant qu' `overflow:hidden`. Merci.
Du coup, ta solution couplée avec celle de Parsimonhi et on devrait être pas mal.

Pour l'aspect fallback il reste toujours le code JS proposé plus haut, mais dans mon cas il n'y a pas vraiment d'intérêt.
Prévenir un modérateur
Répondre au sujet
Aller à