文字框高度自適應例項程式碼

antzone發表於2017-03-13

在比較人性化的網站，文字框的高度並不是固定的，而是可以根據輸入內容的多少會自動調整文字框的高度，當然一般會實現規定一個最低高度，當文字框的輸入內容超過此高度時，就會自定調整文字框的高度，下面是一段這樣的例項程式碼，希望能夠給需要的朋友帶來一定的幫助。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>文字框高度自適應程式碼例項-螞蟻部落</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='螞蟻部落歡迎您..'; 
  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>

以上程式碼實現了我們想要的功能，當輸入文字的時候能夠適當的調整文字框的大小，以適應內容。

相關文章