html text field textarea height increment, wrap

Wrap text field, the height of the self-energizing, in the following manner:

html:

<textarea rows="1" class="answerTextArea" maxlength="60"></textarea>

css:

.answerTextArea{
    width: 100%;
    height: auto;
    border:none;
    outline: none;
    font-size: 0.6rem;
    color:#fff;
    background: none;
    box-sizing: border-box;
    padding: 0.4rem 0;
    border-bottom: 1px solid #fff;
}

js realize the function:

// monitor input text field, automatically change the height 
function makeExpandingArea (EL) {
    var Timer = null ;
    // Since ie8 stack overflow problems, it is adjusted here 
   var the setStyle = function (EL, Auto) {
        IF (Auto) EL. = style.height 'Auto' ; 
       el.style.height = el.scrollHeight + 'PX' ; 
   } 
   var delayedResize = function (EL) {
        IF (Timer) { 
           the clearTimeout (Timer); 
           Timer = null ; 
       } 
       Timer = the setTimeout ( function() {
           setStyle(el)
       }, 200);
   }
   if (el.addEventListener) {
       el.addEventListener('input', function() {
           setStyle(el, 1);
       }, false);
       setStyle(el)
   } else if (el.attachEvent) {
       el.attachEvent('onpropertychange', function() {
           setStyle(el)
       })
       setStyle(el)
   }
   if (window.VBArray && window.addEventListener) { //IE9
       el.attachEvent("onkeydown", function() {
           var key = window.event.keyCode;
           if (key == 8 || key == 46) delayedResize(el);

       });
       el.attachEvent("oncut", function() {
           delayedResize(el);
       }); //处理粘贴
   }
}

//监听文本换行
function exeTextLine(obj){
    if(obj == ""){
        var textareaList = document.getElementsByClassName('answerTextArea');
        
        for(var i=0;i<textareaList.length;i++){
            makeExpandingArea(textareaList[i]);
        }
    }else{
        makeExpandingArea(obj);
    }
    
}

exeTextLine("");

Results are as follows: