關於textarea包在div的自適應問題

2022-09-08 08:27:11 字數 576 閱讀 9170

<

div

class

="inputdiv"

>

<

div

class

="inputtitle"

>詳情:

div>

<

div

class

="inputcontent"

>

<

textarea

type

="text"

id="detai"

name

="detail"

>

textarea

>

div>

div>

textarea被拖動時,包著他的父層div也隨著他的大小變化而變化。所以其父層div不能設定高度的準確值,否則textarea變大時會覆蓋其他的元素,自適應效果失敗。

textarea設定最大最小值保證其大小變化在一定範圍內,

以高為例:

max-height: 200px;

min-height: 50px;

div模擬textarea文字域輕鬆實現高度自適應

因為textarea不支援自適應高度,就是定好高度或者是行數之後,超出部分就會顯示滾動條,看起來不美觀。而用div來模擬時,首先遇到的問題是 div怎麼實現輸入功能?可能我們還是第一次見到這個屬性contenteditable,如乙個普通的block元素上加個contenteditable true...

div實現高度自適應的textarea

textarea使我們常常使用的一種表單形式,多用於大段文字的輸入,大多數情況下,textarea都是可以滿足需求的,但是當我們希望這個輸入框高度自適應的時候,textarea就很難做到了。ok,主角登場,html5中的 contenteditable 可以做到。文件 即這個屬性是直接新增在標籤中的...

div模擬textarea實現高度自增長

今天看到有人在問能不能實現手機輸入框的高度隨著文字增多而增長,到手機頂部的時候再增加內容,出現滾動條。textarea 的高度是固定的,內容超出就會出現滾動條,使用js控制的話效果不是很理想,所有準備使用div來模擬 textarea,這就要不得不提html5的乙個新屬性 contenteditab...