構造高度自適應的textarea

高度自適應的textarea，這個需求仍是比較常見的，隨着用戶的輸入textarea的高度自動變化，這樣輸入較少的時候能夠節省空間，輸入多的時候能夠不出現滾動條，讓內容儘量的展示在用戶的視線內。

惋惜的是textarea自己沒有自適用的技能，文字過多就會出現滾動條的，因此咱們須要曲線救國。

 

基本思路：另外找一個元素，和textarea設置同樣的樣式，當textarea輸入的時候，將內容填充到該元素內，而後再將該元素的高度賦值給textarea。

 

這個元素比較苛刻了，不只要接收textarea的文字內容，也要接收格式，好比回車什麼的，很明顯是pre標籤了。

寫在pre標籤裏的東西能夠原格式輸出，若是要在別的元素，好比div上實現相似的效果，可能須要使用一些CSS，好比white-space:pre，諸如此類的代碼。

 

直接上代碼了:

首先準備一個pre，一個textarea：

<pre class="input" id="pre"></pre>
<textarea class="input" id="textarea"></textarea>

而後給他們設置相同的樣式：

.input {
    padding: 10px;
    width: 300px;
    min-height: 150px;
    border: 1px solid #ccc;
    resize: none;
    font-size: 20px;
    line-height:30px;
    overflow: hidden;
    word-wrap: break-word;
}

這裏設置了min-height，給他們一個最小高度，裏面的字體行高的都設置的同樣，這樣他們的表現就一致了。注意：爲了純英文的換行，加上word-wrap。

最後一段簡單的腳本：

var textarea = document.getElementById('textarea');
var pre = document.getElementById('pre');

textarea.oninput = function() {
    pre.textContent = textarea.value;
    textarea.style.height = pre.offsetHeight + 'px';
}

監聽textarea的input事件，更新自身的高度。

 

這時候，高度自適應的textarea已經構造完成了。可是pre這個元素咱們是不想讓他顯示的，須要把他隱藏掉，但不能簡單的display：none，這樣就取不到pre的高度了，因此使用另一個屬性visibility，不過這個屬性仍是會佔用空間的，把pre絕對定位便可：

.hide {
    position: absolute;
    z-index: -100;
    visibility: hidden;
}

<pre class="input hide" id="pre"></pre>

 

大功告成！

 

不過還有一些兼容性工做要作，IE8如下是不支持oninput事件的，但他們支持一個更強大的屬性：onpropertychange。

可能有的童鞋會以爲可使用onkeyup或者onkeydown事件，我在chrome下試驗了下，在textarea改變高度的時候，會有閃動，oninput的表現就比較平滑。推薦使用oninput。

 

完。