動態調整輸入字段的寬度以適應其輸入

動態調整輸入字段的寬度以匹配其內容長度可以增強用戶體驗防止佈局混亂。雖然設定固定寬度可能會導致多餘的空間或截斷文本，但動態方法可確保輸入欄位具有視覺吸引力和功能性。

不幸的是，使用 CSS 的 min-width 屬性來設定最小寬度不適用於輸入欄位。然而，現代瀏覽器提供了一種稱為“ch”（字元寬度）的替代單位，它與字體無關，等於任何字體中字元“0”的寬度。

要建立動態輸入欄位寬度，我們可以使用下列 JavaScript 程式碼：

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

function resizeInput() {
  this.style.width = this.value.length   "ch";
}

此程式碼將調整大小函數綁定到輸入事件，該函數將輸入欄位的寬度更新為等於其以 ch 為單位的文字長度。此外，我們可以在CSS 中定義輸入字段樣式，如下所示：

input{ font-size:1.3em; padding:.5em; }

這樣就完成了動態可調輸入欄位寬度的實現，該輸入欄位寬度會根據其內容自動擴展或收縮。