HTML 文字輸入欄位可以在沒有 JavaScript 的情況下自動成長嗎？

如何讓HTML 文字輸入欄位隨著您的輸入自動增長

問題：

用戶經常需要文字輸入欄位可以適應他們輸入的文字長度。雖然您可以設定 CSS 的初始大小，但最好讓欄位自動增長，擴展到最大寬度。確定此功能是否可以在 HTML 和 CSS 中實現（最好不需要 JavaScript）是至關重要的。

解決方案：

令人驚訝的是，可以創建一個不斷增長的文本輸入字段僅使用CSS 和contenteditable 屬性：

CSS:

<code class="css">span {
    border: solid 1px black;
}

div {
    max-width: 200px;
}</code>

HTML:

<code class="html"><div>
    <span contenteditable="true">sdfsd</span>
</div></code>

說明contenteditable 屬性允許使用者編輯span 元素內的文字。 div 元素上的 max-width 屬性可確保欄位不超過指定寬度（本例為 200px）。當使用者鍵入時，

span

元素會自動增長以容納新增的文本，直到最大寬度。

有關可編輯內容的註解：

重要的是要記住，使用

contenteditable 允許使用者將 HTML 元素貼到欄位中。在決定是否使用此方法時請考慮這一點。

以上是HTML 文字輸入欄位可以在沒有 JavaScript 的情況下自動成長嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！