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"/>能够规避该问题。

效果图