使用scrollHeight方法 文本域自适应高度

css：

.test_box { width: 98%; min-height: 1rem; max-height: 62px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; _overflow-y: visible; font-size: .6rem; border-radius: 0; }

html：

<textarea class="test_box" id="textarea" placeholder="说一些什么吧"></textarea>

js：

function makeExpandingArea(el) { var setStyle = function(el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; // console.log(el.scrollHeight); } var delayedResize = function(el) { window.setTimeout(function() { setStyle(el) }, 0); } if (el.addEventListener) { el.addEventListener('input',function() { setStyle(el) },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); }); //处理粘贴 }}makeExpandingArea(textarea);

Tags：

转载：转载说明/xd/2.html

很赞哦！ ()