關於textarea文字域高度自適應文字的解決方法
阿新 • • 發佈:2019-01-26
關於textarea文字域的高度除了設定固定高度外,不會隨著文字內容增加而高度自適應的問題.
解決這個問題的方法我們可以利用div模擬textarea的方式
<div id="textarea" contenteditable="true" placeholder="請輸入文字,不得少於100字"></div>
contenteditable="true"這個屬性實現了div文字輸入的功能
css上給div的高度設定成auto 這樣高度就實現了自適應
當然用div模擬textarea時,我們沒辦法使用placeholder的屬性.
當然這個一度讓我煩躁的缺點也是有解決的辦法的.
給div新增 placeholder="xxxx" 的屬性
同時為div設定css,程式碼如下
.textarea{ box-sizing: border-box; width: 100%; height: auto; padding: 5px; border:1px solid #ccc;}.textarea:empty:before{ content: attr(placeholder); color:#bbb; }.textarea:focus:before{ content:none; }大功告成!
剛入行,只是記錄自己遇到的問題,如果恰好能幫助遇到同樣問題的你,那最好不過了.
下次見 --Matcha(抹茶)