歡迎光臨
每天分享高質量文章

案例:根據文本域內容自動調整高度

在用一個簡單的Web端的 Markdown 編輯器時,我需要一個能讓用戶輸入文本的東西。我首先想到的是使用一個具有可編輯屬性的DIV。但是這種方式引入了許多我不想去解決的問題。我僅僅需要一種簡單傻瓜式的方案——美好的TEXTAREA。

但是文本域同樣也有一個大問題:它們會有一個預設的固定高度。你可以設置 rows 屬性來告訴頁面該展示多少行,也可以設置文本域的 style.height 屬性。但不幸的是,文本域沒有自動設置高度(auto-height)的屬性。

我的想法

在每次改變文本時,我們必須計算內容的高度是多少。幸運的是,有個辦法可以實現。element.scrollHeight可以忽略可見滾動條,得到內容的高度。為了減小(文本域)尺寸我們每次將高度設置為0,這樣scrollHeight就傳回所需要的最小高度而不會多餘。例如:當用戶刪除一行的時候。

同樣我們需要計算邊框(border)和輪廓(outline)的尺寸,這樣文本就不會被截斷,也不會出現滾動條。

然後我們設置style.height屬性為已經計算好的高度。

為了每次都執行上面的動作,我們使用oninput事件,這個事件在每次文本內容改變時被觸發。這與onchange事件相反,onchange只會在用戶點擊時觸發。

看看代碼