标签：function el textarea area 高度 撑开 var 粘贴

textarea高度自适应，textarea高度自动增高，textarea高度自动撑开，本文通过复制textarea的html给另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。

技术原理

textarea高度自适应是一个比较常用的前端开发效果。 在新浪微博的输入框中也有这个效果，不过它那个效果不怎么好看，高度展开有点延迟，可能是通过给高度赋值scrollHeight.而下面这个则是通过复制textarea的html并另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。

兼容情况

在使用之前，推荐两个比较好的事件，分别是oninput和onpropertychange，在textarea发生变化时，可以通过监听这两个事件来触发你需要的功能，看一下兼容情况：

Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。

oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。

onpropertychange 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）（仅 IE 支持）。

backspace、delete 两个按键的 keyCode 分别为 8、46。

oncut 事件在粘贴（ctrl + v）、鼠标粘贴时触发。

演示代码

HTML代码：

<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;
  });//处理粘贴
}
container.className += "active";
}

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

当然如果你不追求用户体验的话，则可以只使用textarea，并加入一个简单的代码就能够搞定。可以使用上面同样的两个事件来监听其触发textarea的动作，并赋予textarea的高度为它的scrollHeight。

使用scrollHeight方法

只需要一个textarea： 

HTML代码：

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

JavaScript代码：

function makeExpandingArea(el) {
    var timer = null;
    //由于ie8有溢出堆栈问题，故调整了这里
    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);
        }); //处理粘贴
    }
}

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

标签：function,el,textarea,area,高度,撑开,var,粘贴
来源： https://blog.csdn.net/z591102/article/details/117512597

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。