如何根據內容長度動態調整輸入欄位的大小？

根據輸入調整輸入欄位的寬度

問題：使用HTML 修改輸入欄位的寬度以符合其內容， JavaScript、PHP 或CSS被證明具有挑戰性。 min-width 屬性無效，固定寬度會導致視覺混亂。

解：

考慮使用 CSS 的 ch 單位，這是一種與字體無關的度量對應於零字元的寬度。透過將調整大小函數綁定到輸入事件，可以動態調整輸入欄位的寬度：

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input);

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

要補充這一點，請套用下列CSS 樣式：

<code class="css">input{ font-size:1.3em; padding:.5em; }</code>

這可確保輸入欄位會根據其內容的長度調整其寬度，同時保持所需的填充和字體大小。

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