有時候我們需要乙個高度能隨內容自動增加的輸入框，input顯然不行，因為input裡的文字是不換行的。文字域textarea裡的文字倒是換行的，可一旦文字內容超過其高度，textarea就會增加乙個煩人的滾動條，這是很影響視覺的，就如同下面：
那麼有沒有辦法製作乙個高度能隨文字內容自動增加的輸入框呢？答案是肯定的，下面介紹兩種方式。
這種方式依然使用textarea, 主要思想是我們將textarea放入乙個容器中，同時在這個容器中放入乙個隱藏的 div (visibility: hidden), 監聽textarea的輸入事件並將其中的文字動態的同步到隱藏的div中，這樣div 就可以撐開容器，這時設定textarea的高度為 100% 並將其定位到容器的左上角，那麼textarea的高度自然就是其中文字內容的高度了。
visibility是乙個css屬性，用來在不更改文件的布局的前提下顯示或隱藏元素，它有三個可能的取值：
visible元素正常顯示(預設值)；
hidden隱藏元素，但是其他元素的布局不改變，相當於此元素變成透明。若將其子元素設為 visibility: visible，則該子元素依然可見；
collapse用於**的行、列、列組和行組，隱藏**的行或列，並且不占用任何空間。
你可能已經注意到了，當我們輸入文字時，輸入框的高度顯然要比文字內容高許多，伴隨著輸入文字的增多。高度差會越來越大，這是因為隱藏div與 文字域textarea內字型的尺寸與行高是不同的，div內的字型尺寸與行高要比textarea內的大，所以div撐開的容器高度自然要高於textarea內的文字內容高度。要解決這個問題，統一它們的字型尺寸與行高就可以了。(注：div的字型尺寸與行高預設繼承自父元素)
這樣一來高度就一致了。這種方式雖然可以較好的實現高度自適應的輸入框，但實現起來總感覺很粗糙，下面這種方式就明顯簡單多了。
像div,p,blockquote這樣的元素預設是不可編輯的，但我們可以將其contenteditable屬性設定為true, 使其變為可編輯的。
true或者 '空字串', 表示該元素是可編輯的；
false, 表示該元素是不可編輯的。
如果未設定此屬性，則其預設值將從其父元素繼承。
是不是很簡單呢？ 我們也可以使用css偽類 :empty, :focus, 實現placeholder那樣的效果
如果你使用 vue.js, 我們也可以它封裝為乙個vue元件：
}
v-model指令，將子元件的value與 父元件的msg雙向繫結在一起。當輸入事件發生後，子元件呼叫changetext方法，觸發乙個input事件，父元件監聽到此事件，將事件傳遞過來的資料同步到msg上，由於資料是雙向繫結的，子元件的value值也會相應發生變化。更過原理請參考 自定義元件的-v-model
該篇部落格內的**已同步到github
參考資料：
[1]. mdn文件
[2]. mdn文件
[3]. mdn文件
[4]. mdn文件
[5]. vue.js官方文件 自定義元件的-v-model
輸入框自適應輸入的內容
我的需求是 每次輸出英文分號 就把輸入框的長度增加。import react,from react import from react const inputdata setinputdata usestate 輸入框的內容 const length setlength usestate 316 初...
實現乙個高度自適應的輸入框
有placeholder，輸入為空時，顯示placeholder 可設定maxlength 將textarea的高度設定成auto，overflow設定成visible。如下 height auto overflow x visible overflow y visible width 300px ...
實現乙個高度自適應的輸入框
需求背景 設想1 使用textarea實現 將textarea的高度設定成auto，overflow設定成visible。如下 複製 但是經過測試，textarea實際上將是預設的高度，隨著輸入的增多會出現滾動條，並沒有達到我們想要的效果。設想2 contenteditable 我們知道可以將div...