angular 版本----------
pc 移动端都经过测试，没问题 放心用吧！有粘贴无效的问题，因为内部调用的jquery实现，可以加一个 input.
directiveApp.directive(\'autoHeight\', function(){
function autoHeight(elem){
elem.style.height = \'auto\';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + \'px\';
}
return {
scope: {},
link: function (scope, ele, attrs) {
var oriEle = $(ele).get(0);
$(oriEle).focus();
$(oriEle).bind(\'keyup click input\', function(e) {
autoHeight($(this).get(0));
});
var timer = setInterval(function(){
if($(oriEle).val()) {
autoHeight(oriEle);
clearInterval(timer);
}
}, 100);
}
};
});<br>
|
|
1
2
|
Html code: <textarea auto-height></textarea>
|
-------------------------------------------------------------------------------------------------------------------------------
js版本
1.引入Jquery.
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
2.引入初始css.
body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}
3.加入自适应的JS
$.fn.autoHeight = function(){
function autoHeight(elem){
elem.style.height = \'auto\';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + \'px\';
}
this.each(function(){
autoHeight(this);
$(this).on(\'keyup\', function(){
autoHeight(this);
});
});
}
$(\'textarea[autoHeight]\').autoHeight();
4.加入textarea
<div><textarea autoHeight="true">textarea</textarea></div>
1.引入Jquery.
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
2.引入初始css.
body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}
3.加入自适应的JS
$.fn.autoHeight = function(){
function autoHeight(elem){
elem.style.height = \'auto\';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + \'px\';
}
this.each(function(){
autoHeight(this);
$(this).on(\'keyup\', function(){
autoHeight(this);
});
});
}
$(\'textarea[autoHeight]\').autoHeight();
4.加入textarea
<div><textarea autoHeight="true">textarea</textarea></div>
$(function(){
$.fn.autoHeight = function(){
function autoHeight(elem){
elem.style.height = \'auto\';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + \'px\';
}
this.each(function(){
autoHeight(this);
$(this).on(\'keyup\', function(){
autoHeight(this);
});
});
}
$(\'textarea[autoHeight]\').autoHeight();
})
页面中的textarea直接加属性就行
<textarea autoHeight="true" readonly="readonly" > </textarea>