如何根據內容動態調整輸入欄位寬度？

根據內容動態調整輸入欄位寬度

雖然提供的CSS 程式碼style="min-width:1px;"對於輸入欄位可能無法有效運作，但存在一種替代解決方案，可根據輸入欄位的內容動態調整輸入欄位的寬度。此方法涉及利用 CSS 單位“ch”（字元），它表示所選字體中字元“0”（零）的寬度。

要實作此解決方案，可以使用 JavaScript 來處理'input' 事件，每當使用者在輸入欄位中鍵入時就會觸發。在此事件處理程序中，可以執行以下操作：

<code class="javascript">var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

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

此外，為了優化輸入欄位的外觀，可以如下應用CSS：

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

一起，這些修改將使輸入欄位能夠流暢地調整其寬度以適應其內容，同時保持可讀性。 「ch」單位確保寬度與輸入的字元成比例，從而產生動態響應的輸入欄位。

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