angular version ----------
pc mobile terminal is tested, no problem, rest assured it!
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'
,
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 version
1. The introduction of Jquery.
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
2. The introduction of the initial css.
body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}
3. Add adaptive 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. Add textarea
<div><textarea autoHeight="true">textarea</textarea></div>
1. The introduction of Jquery.
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
2. The introduction of the initial css.
body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}
3. Add adaptive 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. Add 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();
})
Page textarea directly increase property on the line
<textarea autoHeight="true" readonly="readonly" > </textarea>