Comment puis-je redimensionner la zone de texte afin qu'elle s'adapte à la largeur du contenu et définir la largeur minimale et maximale ?

Question

Donc, j'ai maintenant des problèmes avec la zone de texte, je ne peux pas la redimensionner à la largeur du contenu... J'ai trouvé une réponse longue et détaillée sur la hauteur du contenu et ça marche ! Mais il n'y a pas de largeur de contenu au-dessus de...

Voici cet article : Création d'une zone de texte avec redimensionnement automatique

Cependant, mon problème n'est pas résolu, je dois également ajuster la largeur. Tenez compte des largeurs maximales et minimales.

Voici un exemple de code :

$("textarea").each(function () {
  this.setAttribute("style", "hauteur:" + (this.scrollHeight) + "px;");
}).on("entrée", fonction () {
  this.style.hauteur = 0;
  this.style.height = (this.scrollHeight) + "px" ;
});
$("textarea").trigger("input");

textarea{
  bordure : 1px noir uni ;
  largeur minimale : 50 px ;
  largeur maximale : 300 px ;
  largeur : automatique ;
}</pré>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/script>
<textarea> ceci est mon contenu normal, et il doit considérer que ce contenu est aussi long que la largeur maximale</textarea>
<textarea> ceci est mon contenu normal, doit être considéré</textarea>
<textarea> ceci est mon contenu minimal</textarea>

C'est aussi ce que je veux qu'ils soient :

Answer 1

Est-ce similaire à ça ?

Remarque : Comme mentionné dans les commentaires, cette technique utilise l'attribut contenteditable

#myInput {
  min-height: 20px;
  max-height: 100px;
  overflow: auto;
  border: 1px solid #000;
  border-radius: 4px;
  max-width: 80%;
  min-width: 40px;
  display: inline-block;
  padding: 7px;
  resize: vertical;
}

<div contenteditable id="myInput"></div>