The height of textarea is self-adaptive, the height of textarea is automatically increased, and the height of textarea is automatically extended. In this paper, by copying the height of textarea html For another element, pre is set to expand automatically, so there will be no feeling of detention, and the interaction effect is good.

 

technology principle

textarea highly adaptive is a commonly used method front end Development effect. There is also this effect in the input box of sina Weibo, but its effect is not very good-looking. The height expansion is a little delayed. It may be by assigning a value of scrollHeight to the height The following is by copying textarea html And another element, pre, is set to expand automatically, so there will be no feeling of detention, and the interaction effect is good.

 

Compatibility

Before use, two better events are recommended, namely oninput and onpropertychange. When textarea changes, you can trigger the functions you need by listening to these two events to see the compatibility:

 

Firefox, Chrome, IE9 and IE10 all support "oninput" events. In addition, all versions of "ie" support "onpropertychange" events.

oninput events are triggered during user input, backspace, delete, cut (ctrl + x), paste (ctrl + v) and mouse cut and paste (only triggered during input, paste and mouse paste in IE9).

onpropertychange events are triggered during user input, backspace, delete, cut (ctrl + x), paste (ctrl + v) and mouse cut and paste (only triggered during input, paste and mouse paste in IE9) (only supported by IE).

The key codes of backspace and delete are ， 8 and 46 respectively.

The oncut event is triggered when pasting (ctrl + v) and mouse pasting.

demonstration code

HTML code:

<div class="expandingArea " id="textarea">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>

js:

function makeExpandingArea(container) {
  var area = container.getElementsByTagName('textarea')[0] ;
  var span = container.getElementsByTagName('span')[0] ;
  if (area.addEventListener) {
    area.addEventListener('input', function() {
      span.textContent = area.value;
   }, false);
   span.textContent = area.value;
 } else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    var html = area.value.replace(/n/g,'<br/>');
    span.innerText = html; 
  });
  var html = area.value.replace(/n/g,'<br/>');
  span.innerText = html;
}
if(window.VBArray && window.addEventListener) { //IE9
  area.attachEvent("onkeydown", function() {
    var key = window.event.keyCode;
    if(key == 8 || key == 46) span.textContent = area.value;
 
  });
  area.attachEvent("oncut", function(){
    span.textContent = area.value;
  });//Process paste
}
container.className += "active";
}

var areas = document.getElementById('textarea') ;
makeExpandingArea(areas);

Of course, if you don't pursue user experience, you can just use textarea and add a simple code. You can use the same two events above to listen to the action that triggers textarea, and give the height of textarea to its scrollHeight.

 

Using the scrollHeight method

Only one textarea is required:

HTML code:

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

JavaScript code:

function makeExpandingArea(el) {
    var timer = null;
    //Because ie8 has the problem of overflow stack, it is adjusted here
    var setStyle = function(el, auto) {
        if (auto) el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
    }
    var delayedResize = function(el) {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = 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);
        }); //Process paste
    }
}

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