textarea高度隨內容自適應增高撐開

通常狀況下，就是爲textarea設定爲必定的高度的文本框，而後當輸入的內容超過設定的高度的時候，就會出現滾動條，這樣顯示是不太美觀的，所以就出現須要textarea隨輸入文本內容高度自適應的需求。

而textarea自己是沒有這個功能的，因此咱們就須要利用js動態爲textarea設置高度。

解決方案代碼：

HTML代碼：

<textarea id="textarea"></textarea>

JavaScript代碼：

1. function makeExpandingArea(el) {

2.    var timer = null;

3.    //因爲ie8有溢出堆棧問題，故調整了這裏

4.    var setStyle = function(el, auto) {

5.        if (auto) el.style.height = 'auto';

6.        el.style.height = el.scrollHeight + 'px';

7.    }

8.    var delayedResize = function(el) {

9.        if (timer) {

10.            clearTimeout(timer);

11.            timer = null;

12.        }

13.        timer = setTimeout(function() {

14.            setStyle(el)

15.        }, 200);

16.    }

17.    if (el.addEventListener) {

18.        el.addEventListener('input', function() {

19.            setStyle(el, 1);

20.        }, false);

21.        setStyle(el)

22.    } else if (el.attachEvent) {

23.        el.attachEvent('onpropertychange', function() {

24.            setStyle(el)

25.        })

26.        setStyle(el)

27.    }

28.    if (window.VBArray && window.addEventListener) { //IE9

29.        el.attachEvent("onkeydown", function() {

30.            var key = window.event.keyCode;

31.            if (key == 8 || key == 46) delayedResize(el);

32. 
    

33.        });

34.        el.attachEvent("oncut", function() {

35.            delayedResize(el);

36.        }); //處理粘貼

37.    }

38. }

39. 
    

40. //調用

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

42. makeExpandingArea(textarea);

P.S.

這種寫法是兼容當前大部分瀏覽器的，不過目前發現只有IE11是不支持的，當IE11使用以上JS代碼的時候會出現 對象不支持「attachEvent」屬性或方法 這時咱們只須要在中添加 <metahttp-equiv="X-UA-Compatible"content="IE=10"/>能夠規避該問題。

效果圖