textarea高度自适应自动展开

最新推荐文章于 2024-03-15 16:36:49 发布

weixin_33985507

最新推荐文章于 2024-03-15 16:36:49 发布

阅读量243

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/wangsicongde/p/7598722.html

版权

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

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

代码兼容IE7及以上，IE6没测，已放弃兼容

HTML代码：

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

JS：

function makeExpandingArea(container) {
  var area = document.getElementsByTagName('textarea')[0] ;
  var span = document.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;
}
container.className += "active";
}

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

原文链接：前端开发博客http://caibaojian.com/textarea-autoheight.html

转载于:https://www.cnblogs.com/wangsicongde/p/7598722.html