JavaScript文本框高度自适应实例代码

在比较人性化的网站，文本框的高度并不是固定的，而是可以根据输入内容的多少会自动调整文本框的高度，当然一般会实现规定一个最低高度，当文本框的输入内容超过此高度时，就会自定调整文本框的高度，下面是一段这样的实例代码，希望能够给需要的朋友带来一定的帮助。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>文本框高度自适应代码实例-51前端</title> 
<style type="text/css"> 
#textarea { 
  font:1.4em/1.8em Arial; 
  overflow:hidden; 
  width:550px; 
  height:6em; 
  padding:10px; 
} 
</style> 
<script type="text/javascript">
var autoTextarea=function (elem,extra,maxHeight) { 
  extra=extra||20; 
  var isFirefox=!!document.getBoxObjectFor||'mozInnerScreenX' in window, 
  isOpera=!!window.opera&&!!window.opera.toString().indexOf('Opera'), 
  addEvent=function(type,callback) { 
    elem.addEventListener ? 
    elem.addEventListener(type,callback,false) : 
    elem.attachEvent('on' + type, callback); 
  }, 
  getStyle=elem.currentStyle?function(name) { 
    var val=elem.currentStyle[name]; 
    if(name==='height'&&val.search(/px/i) !== 1) { 
      var rect = elem.getBoundingClientRect(); 
      return rect.bottom - rect.top - 
      parseFloat(getStyle('paddingTop')) - 
      parseFloat(getStyle('paddingBottom')) + 'px'; 
    }; 
    return val; 
  } : function (name){ 
    return getComputedStyle(elem, null)[name]; 
  }, 
  minHeight = parseFloat(getStyle('height')); 
  elem.style.maxHeight = elem.style.resize = 'none'; 
  var change = function () { 
    var scrollTop, height, 
    padding = 0, 
    style = elem.style; 
    if (elem._length === elem.value.length) return; 
    elem._length = elem.value.length; 
    if (!isFirefox && !isOpera) { 
      padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom')); 
    }; 
    scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
    elem.style.height = minHeight + 'px'; 
    if(elem.scrollHeight > minHeight){ 
      if (maxHeight && elem.scrollHeight > maxHeight) { 
        height = maxHeight - padding; 
        style.overflowY = 'auto'; 
      } 
      else 
      { 
        height = elem.scrollHeight - padding; 
        style.overflowY = 'hidden'; 
      }; 
      style.height = height + extra + 'px'; 
      scrollTop += parseInt(style.height) - elem.currHeight; 
      document.body.scrollTop = scrollTop; 
      document.documentElement.scrollTop = scrollTop; 
      elem.currHeight = parseInt(style.height); 
    }; 
  }; 
  addEvent('propertychange', change); 
  addEvent('input', change); 
  addEvent('focus', change); 
  change(); 
}; 
  
window.onload=function(){
  var text=document.getElementById("textarea");
  var tip='51前端欢迎您..'; 
  autoTextarea(text);
  text.value=tip; 
  text.onfocus=function() { 
    if(text.value===tip) text.value = ''; 
  }; 
  text.onblur=function() { 
   if(text.value==='') text.value=tip; 
  };
} 
</script> 
</head> 
<body> 
<textarea id="textarea"></textarea> 
</body> 
</html>

代码描述：JavaScript文本框高度自适应。JavaScript文本框高度自适应实例代码

下载全部收藏

141 188

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册