textarea文本框根据输入内容自适应高度

在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,全兼容IE6+与现代浏览器!具体函数代码如下:

  1. /** 
  2.  * 文本框根据输入内容自适应高度 
  3. **/ 
  4. var autoTextarea = function (elem, extra, maxHeight) { 
  5.     extra = extra || 20; 
  6.     var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, 
  7.         isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'), 
  8.         addEvent = function (type, callback) { 
  9.             elem.addEventListener ? 
  10.                 elem.addEventListener(type, callback, false) : 
  11.                 elem.attachEvent('on' + type, callback); 
  12.         }, 
  13.         getStyle = elem.currentStyle ? function (name) { 
  14.             var val = elem.currentStyle[name]; 
  15.             if (name === 'height' && val.search(/px/i) !== 1) { 
  16.                 var rect = elem.getBoundingClientRect(); 
  17.                 return rect.bottom - rect.top - 
  18.                     parseFloat(getStyle('paddingTop')) - 
  19.                     parseFloat(getStyle('paddingBottom')) + 'px'
  20.             }; 
  21.  
  22.             return val; 
  23.         } : function (name) { 
  24.                 return getComputedStyle(elem, null)[name]; 
  25.         }, 
  26.         minHeight = parseFloat(getStyle('height')); 
  27.     elem.style.maxHeight = elem.style.resize = 'none'
  28.     var change = function () { 
  29.         var scrollTop, height, 
  30.             padding = 0, 
  31.             style = elem.style; 
  32.         if (elem._length === elem.value.length) return
  33.         elem._length = elem.value.length; 
  34.  
  35.         if (!isFirefox && !isOpera) { 
  36.             padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom')); 
  37.         }; 
  38.         scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
  39.         elem.style.height = minHeight + 'px'
  40.         if (elem.scrollHeight > minHeight) { 
  41.             if (maxHeight && elem.scrollHeight > maxHeight) { 
  42.                 height = maxHeight - padding; 
  43.                 style.overflowY = 'auto'
  44.             } else { 
  45.                 height = elem.scrollHeight - padding; 
  46.                 style.overflowY = 'hidden'
  47.             }; 
  48.  
  49.             style.height = height + extra + 'px'
  50.             scrollTop += parseInt(style.height) - elem.currHeight; 
  51.             document.body.scrollTop = scrollTop; 
  52.             document.documentElement.scrollTop = scrollTop; 
  53.             elem.currHeight = parseInt(style.height); 
  54.         }; 
  55.     }; 
  56.     addEvent('propertychange', change); 
  57.     addEvent('input', change); 
  58.     addEvent('focus', change); 
  59.     change(); 
  60. }; 

调用方法如下(textarea_id为textarea的id值):

  1. autoTextarea(document.getElementById('textarea_id')); 

另外一种简易的实现方法:

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>TEXTAREA自适应文字行数的多少</title> 
  5. </head> 
  6. <body> 
  7. <textarea rows="6" name="s1" cols="27" onpropertychange="this.style.posHeight=this.scrollHeight"></textarea> 
  8. </body> 
  9. </html> 

转载请注明:代码家园 » textarea文本框根据输入内容自适应高度

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)