input與textarea的區別以及用div模擬textarea
阿新 • • 發佈:2018-12-09
1.input與textarea的區別
<input>是單行文字框,不會換行。通過size屬性指定顯示字元的長度,注意:當使用css限定了寬高,那麼size屬性就不再起作用。
value屬性指定初始值,Maxlength屬性指定文字框可以輸入的最長長度。可以通過width和height設定寬高,但是也不會
增加行數。
<textarea> 是多行文字輸入框,文字區中可容納無限數量的文字,無value屬性,其中的文字的預設字型是等寬字型(通常是
Courier) ,可以通 過 cols 和 rows 屬性來規定 textarea 的尺寸,不過更好的辦法是使用 CSS 的 height 和 width 屬性。
程式碼:
<div>
input:<input value="啦啦啦啦啦" style="height:200px;width: 500px;">
</div>
<div style="margin-top: 20px;">
textarea:</textarea><textarea value="嘻嘻嘻" style="height:200px;width: 500px;">
</textarea>
</div>
效果圖:
可以看到:textarea中設定的value並沒有顯示,同時input文字依然只有一行,並且居中顯示。
2.用div模擬textarea
作為多行文字域功能來講,textarea
滿足了我們大部分的需求。然而,textarea
有一個不足就是不能像普通div標籤一樣高度可以跟隨內容自適應。textarea
總是很自信地顯擺它的滾動條,高度固執地巋然不動。
要解決這個問題很簡單,一個普通的block元素上加個contenteditable="true"
就ok了。
<div contenteditable="true"></div>
效果圖:
程式碼:
<style> .textarea{ min-height: 100px; border: 1px solid #a0b3d6; width: 300px; font-size: 14px; max-height: 300px; overflow-y: auto; } </style> </head> <body> <!--<div> input:<input value="啦啦啦啦啦" style="height:200px;width: 500px;"> </div> <div style="margin-top: 20px;"> textarea:</textarea><textarea value="嘻嘻嘻" style="height:200px;width: 500px;"></textarea> </div>--> <!--用div模擬textarea--> <div class="textarea" contenteditable="true"> </div> </body>
給div設定了一個最小高度,當超過最小高度但不超過最大高度時,div的高度根據文字自適應,當超過最大高度時,出現滾動條。