テキストエリアの高さを塗りつぶして展開する方法は？

Question

私はtextareaを特定の最小の高さで持っていて、this articleに基づいて拡張可能にしました。問題は最小の高さになる前に拡大されるので、最初にその高さを埋めるようにしてから展開することです。ここ

fiddle

そして、ここではコードです：

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; 
    }); 
} 

textareaとpreの要素の最小高さをコンテナdivと同じに設定しようとしましたが、物が変更されませんでした。

私はどんな提案もありがとうございます。

Answer 1

テキスト領域が入力より先に拡大するという問題は、親要素の高さを指示する実際の要素である<pre>要素の余白をリセットしていないためです。

これは、<pre>が占めるスペースが常にその高さ+（非ゼロ）マージンになることを意味します。余分なスペースが発生し、テキストエリアの最後に余分な行があるという錯覚を与えます。

あなたは、単にmargin: 0にそれをリセットする場合は、あなたの<textarea>が今<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

テリーが既に正しい答えを与えました。これはcontenteditableを使用して、JavaScriptをせずに、簡単な自動拡大のtextareaを取得するだけで、別のソリューションです：

// 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>