div實現高度自適應的textarea

2022-03-06 02:46:14 字數 1165 閱讀 1340

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

文件: 

即這個屬性是直接新增在標籤中的,屬性值為true則為可編輯,屬性值為false則為不可編輯。 

下面的這段**即可實現:

"en

">"

true

"class="

foo">

即建立的這個div的寬度是固定的,高度最小值為30px,最大值為200px,outline設定為none,當高度超出時出現滾動條, 給乙個紅色的border,新增padding美化效果,最終展示如下:

可以看到, 這裡當我們回車時就會建立乙個新的div,並且在某些情況下會建立乙個

標籤。 

那麼我們可以通過使用正規表示式來去除之:

document.queryselector('

.foo

').innerhtml.replace(/||

| /g, "");

這樣得到的結果就是: "第一:這時非常好的一件事情。第二:不錯。第三:js一統天下。"

於是,我們就可以以此來提交表單了。

但是,事情並沒有這麼簡單,因為,通過嘗試發現,這裡不僅可以使用文字,還可以填充富文字,如下:

這時再用正則來處理就有問題了。

其實 contenteditable 提供的不僅僅是true和false,還可以使用 plaintext-only 作為值,如下:

"

plaintext-only

"class="

foo">

這樣就既不用使用正則,也不需要擔心富文字的輸入了。

div自適應高度

如何控制div最小高度又div自適高度 我們在用div布局的時候經常會遇到這樣的一種情況 我們需要設定乙個div高度,當裡面的東西超過這個高度時,讓這個容器自動被撐開,也就是div自適應高度。當裡面的資訊很少時候,我們就設定它乙個最小的固定高度。我們知道,在ie6中,如果子容器的高度超過父容器的時候...

div高度自適應

盒模型的height的預設值為auto,它表示盒模型的高度由它所包裹的內容高度來決定,因此div不設定height的值就可以實現高度的自適應。然而在實際css布局實踐中,常常出現一些特殊的需求。div的高度初始為某一固定高度,然後隨著內容的增多高度自適應。css屬性中min height是專門來解決...

CSS實現div高度自適應

1 有時候,我們希望容器有乙個固定高度,但當其中的內容多的時候,又希望高度能夠自適應,也即容器在縱向能被撐開,且如果有背景,也能夠自適應。在一般情況下,使用min height即可解決。但是廣大網民的首選瀏覽器ie6並不支援min height。ie7,opera,火狐,谷歌沒有問題。所以採用以下寫...