首頁 > web前端 > js教程 > 如何根據內容長度動態調整輸入欄位的大小?

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

Patricia Arquette
發布: 2024-10-29 08:47:30
原創
300 人瀏覽過

How to Dynamically Resize Input Fields Based on Content Length?

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

問題:使用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板