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

透過 CSS 增強文字輸入回應能力

製作 Web 表單時，控製文字輸入欄位的大小至關重要。 CSS 提供了一種簡單的方法來定義其初始尺寸。但是，如果您希望輸入隨著使用者鍵入而動態擴展並達到最大寬度，該怎麼辦？本文深入研究了僅 CSS 和基於 HTML 的技術來實現此行為。

CSS 和內容可編輯

利用 CSS 和「contentEditable」屬性提供了一個優雅的解決方案。 「contenteditable」允許使用者修改 HTML 元素的內容，使其成為建立動態文字輸入欄位的理想選擇。以下是一個範例：

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

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

當使用者在 div 中鍵入內容時，包含輸入的範圍將自動擴展以容納新增的字符，直到達到 CSS 中指定的最大寬度 200px。

注意事項

雖然「contenteditable」提供了彈性，但必須注意其限制。它允許用戶將 HTML 程式碼貼到輸入中，這在某些情況下可能是不可取的。因此，在選擇這種方法之前評估它是否符合預期功能至關重要。

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