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的高度根據文字自適應，當超過最大高度時，出現滾動條。