如何動態調整輸入欄位的大小以符合其內容長度？

調整輸入欄位大小以符合輸入長度

調整輸入欄位的寬度以精確符合其輸入可能是一項棘手的任務。雖然使用 min-width 設定最小寬度的傳統方法可能無法總是產生所需的結果，但有替代解決方案可以克服這項挑戰。

CSS 單位：ch

現代瀏覽器支援CSS單位“ch”，它代表目前字體中字元「0」（零）的寬度。本單元與字體無關，提供了定義輸入欄位最小寬度的可靠方法。

JavaScript 調整大小函數

根據輸入動態調整寬度長度，您可以使用以下JavaScript 函數：

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

此函數檢索輸入的值並使用“ch”設定寬度單位，確保欄位擴展或縮小以適應輸入。

綁定到輸入事件

要觸發調整大小功能，請將其綁定到「input」事件：

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

透過應用這些技術，您可以創建根據輸入流暢地調整其寬度的輸入字段，從而提供更用戶友好的和動態體驗。

以上是如何動態調整輸入欄位的大小以符合其內容長度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！