Comment faire pour agrandir textarea après avoir rempli sa hauteur?

Question

J'ai un textarea avec une hauteur minimale spécifique et basé sur this article je l'ai fait expansible. Le problème est qu'il se dilate avant qu'il ne remplisse sa hauteur minimale, donc je le veux d'abord remplir sa hauteur donnée et ensuite développer.

ici est un fiddle

Et voici le code:

HTML:

<div class="expand js-expand"> 
    <pre><span></span><br></pre> 
    <textarea></textarea> 
</div> 

CSS:

.expand { 
    max-height: 100px; 
    overflow: hidden; 
    width:83%; 
    min-height: calc(5rem - 0.5rem - 0.5rem); 
    position: relative; 
    background-color: #ffffff; 
} 

.expand textarea, 
.expand pre { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    text-align: left; 
    width: calc(100% - 0.5rem - 1rem); 
    min-height: 100%; 
    padding: 0.5rem 1rem 0.5rem 0.5rem; 

} 

.expand textarea { 
    resize: none; 
    border: none; 
    position: absolute; 
    top: 0; left: 0; 
    overflow: visible; 

} 

JS:

expandtextarea(document.querySelector('.js-expand')); 

function expandtextarea(container) { 
    var tarea = container.querySelector('textarea'); 
    var mirror = container.querySelector('span'); 
    tarea.addEventListener('input', function(e) { 
     mirror.textContent = tarea.value; 
    }); 
} 

J'ai essayé de définir une hauteur minimale pour textarea et pre éléments pour être le même que le conteneur div mais il n'a rien changé.

Je me ferai un plaisir de faire des suggestions.

Answer 1

Le problème observé que la zone de texte se développer avant l'entrée est parce que vous n'avez pas réinitialiser la marge de l'élément <pre>, qui est l'élément réel qui dicte la hauteur de l'élément parent. Cela signifie que l'espace occupé par <pre> sera toujours sa marge hauteur + (non nulle), ce qui provoque cet espace supplémentaire et donne l'illusion que vous avez une ligne supplémentaire à la fin de la zone de texte.

Si vous rétablissez simplement à margin: 0, vous verrez que votre <textarea> va maintenant avoir la même hauteur extérieure calculée comme l'élément <pre>:

expandtextarea(document.querySelector('.js-expand')); 
 

 

 
function expandtextarea(container) { 
 
\t var tarea = container.querySelector('textarea'); 
 
\t var mirror = container.querySelector('span'); 
 
\t tarea.addEventListener('input', function(e) { 
 
\t \t mirror.textContent = tarea.value; 
 
\t }); 
 
}

.expand { 
 
\t max-height: 200px; 
 
\t overflow: hidden; 
 
    width:83%; 
 
    min-height: calc(5rem - 0.5rem - 0.5rem); 
 
    position: relative; 
 
    background-color: #eee; 
 
} 
 

 
.expand textarea, 
 
.expand pre { 
 
\t white-space: pre-wrap; 
 
\t word-wrap: break-word; 
 
    text-align: left; 
 
    width: calc(100% - 0.5rem - 1rem); 
 
    min-height: 100%; 
 
    padding: 0.5rem 1rem 0.5rem 0.5rem; 
 
    
 
    /* Reset margin */ 
 
    margin: 0; 
 
} 
 

 
.expand textarea { 
 
\t resize: none; 
 
\t border: none; 
 
\t position: absolute; 
 
\t top: 0; left: 0; 
 
\t overflow: visible; 
 
    
 
    /* Irrelevant style, added for visibility only */ 
 
    background-color: #ccc; 
 
}

<div class="expand js-expand"> 
 
    <pre><span></span><br></pre> 
 
    <textarea></textarea> 
 
</div>

Answer 2

Terry a déjà donné une réponse correcte . Ceci est juste une autre solution pour obtenir d'un simple textarea auto-expand, sans JavaScript, en utilisant contenteditable:

// Just some JS to get the value... 
 
document.getElementsByTagName('button')[ 0 ].addEventListener('click',() => { 
 
    const tarea = document.querySelector('.textarea'); 
 
    const value = tarea.innerText; 
 
    
 
    console.log(value); 
 
});

.textarea { 
 
    border: 1px solid #ccc; 
 
    min-height: 4rem; 
 
    max-height: 200px; 
 
    overflow: auto; 
 
}

<div contenteditable class="textarea" aria-role="textbox"></div> 
 
<button>Get value</button>