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

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

CSS 和內容可編輯

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

span {
    border: solid 1px black;
}
div {
    max-width: 200px;
}

    sdfsd

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

注意事項

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