javascript改進textarea文字域自適應內容高度
場景需求：根據輸入內容自適應高度，textarea不能滿足需求，需要該進
autoTextarea.js:
define('autoTextarea',[],function(){
return{
/*
* 文字框根據輸入內容自適應高度
*cfg{ //配置引數
elem:elem,//輸入元素
extra:extra,// 設定游標與輸入框保持的距離（預設0）
maxHeight:maxHeight,//設定最大高度（可選）
initEvent:initEvent, //是否初始化文字高度（true ／ false）
initScroll:initScroll,//是否初始化文字框滾回頂部（true／false）
changeHeight:changeHeight // 回撥函式
}
*/
fn:function(cfg){
if(!cfg){return}
var elem=cfg.elem,extra=cfg.extra||0,maxHeight=cfg.maxHeight||0,initEvent=cfg.initEvent||false,initScroll=cfg.initScroll||false;
var addEvent=function(type,callback){
elem.addEventListener?elem.addEventListener(type,callback,false):elem.attachEvent('on'+type,callback);
};
var getStyle;
if(elem.currentStyle){
getStyle=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;
};
}else{
getStyle=function(name){
return getComputedStyle(elem,null)[name];
};
}
var minHeight=parseFloat(getStyle('height'))>=0?parseFloat(getStyle('height')):0;
elem.style=resize='none';//如果不希望使用這可以自由的伸展textarea的高度可以設定其他值
var change=function(type){
var height;
var style=elem.style;
if(elem._length===elem.value.length) return;
elem._length=elem.value.length;
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
elem.style.height=minHeight+'px';
if(elem.scrollHeight>=minHeight){
if(maxHeight&&elem.scrollHeight>maxHeight){
height=maxHeight;
style.overflowY='auto';
}else{
height=elem.scrollHeight;
style.overflowY='hidden';
}
style.height=height+extra+'px';
if(initScroll){
scrollTop+=parseInt(style.height)-elem.currHeight;
document.body.scrollTop=scrollTop;
document.documentElement.scrollTop=scrollTop;
}
elem.currHeight=parseInt(style.height);
if(cfg&&typeof cfg.changeHeight==='function'){cfg.changeHeight(height+extra)}
if(type=='keydown'||type=='input'){elem.focus()}
}
} ;
if(initEvent){change();}
addEvent('focus',function(){change('focus')});
addEvent('input',function(){change('input')}) ;
}
}
});
呼叫如下：
<textarea name='conten' row='1' class='simulation-textarea validate ipt' type='text'>
輸入內容區，高度回隨內容的高度變化，不會出現滾動條
</textarea>
引入autoTextarea.js
require(['auto Textarea'],function(autoTextareaUtils)){
var autoTextarea=autoTextareaUtils.fn;
autoTextarea({elem:$('.simulation-textarea')[0],initEvent:false})
})
幾乎相容所有主流瀏覽器，IE可以相容到IE8