如何使用 CSS 建立動態可擴充的 HTML 文字輸入欄位？

使用 CSS 動態擴充 HTML 文字輸入欄位

建立文字輸入欄位時，您可以使用 CSS 指定其初始大小。但是，您可能希望該欄位在您鍵入時自動擴展，直到達到定義的最大寬度。

透過可編輯內容實現可擴充性

建立可擴充的一種方法沒有 JavaScript 的文字輸入欄位是使用 Content Editable。此方法涉及：

1. CSS:定義文字輸入欄位的尺寸和樣式：

<code class="css">span {
    border: solid 1px black;
}
div {
    max-width: 200px; 
}</code>

2. HTML: 建立一個div 元素，其中包含可編輯內容的span：

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

工作原理：

在此解決方案中，span元素是contenteditable，允許使用者直接編輯其文字。當您鍵入時，跨度的寬度會在 div 設定的最大寬度（在本例中為 200px）內擴展。 Span 的邊框直觀地指示文字輸入區域。

有關可編輯內容的注意事項：

雖然此方法提供了無 JavaScript 解決方案，但需要注意的是contenteditable 元素可以允許使用者貼上 HTML 元素。選擇這種方法時請考慮這一點。

以上是如何使用 CSS 建立動態可擴充的 HTML 文字輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！