隨著html5的即將退出,相信大家對頁面更加人性化有了一定的期待,這裡我介紹兩種方法,讓你的textarea能夠實現根據內容自動調整高度,讓你的頁面也炫起來!
方法一,使用js自動調整
name
="mytextarea"
cols
="80"
style
="overflow-y:hidden;height:80px;"
onpropertychange=
"this.style.height=this.scrollheight+'px';"
oninput=
"this.style.height=this.scrollheight+'px';">textarea>
方法二,使用css控制,只需給文字域設定overflow-y:visible樣式,比較簡單,推薦使用
style
="width:300px;overflow-y:visible">
關於textarea文字域高度自適應文字的解決方法
關於textarea文字域的高度除了設定固定高度外,不會隨著文字內容增加而高度自適應的問題.解決這個問題的方法我們可以利用div模擬textarea的方式 contenteditable true 這個屬性實現了div文字輸入的功能 css上給div的高度設定成auto 這樣高度就實現了自適應 當然...
div模擬textarea實現高度自增長
今天看到有人在問能不能實現手機輸入框的高度隨著文字增多而增長,到手機頂部的時候再增加內容,出現滾動條。textarea 的高度是固定的,內容超出就會出現滾動條,使用js控制的話效果不是很理想,所有準備使用div來模擬 textarea,這就要不得不提html5的乙個新屬性 contenteditab...
div模擬textarea實現高度自增長
h5提供了乙個屬性 contenteditable 使得div充當文字輸入不再是夢想 以下是div實現文字輸入的簡單demo div id textarea contenteditable true div css樣式 textarea在vue中如何獲取div中的內容 div id textarea...