方案1:
$("#theId").height($("#theId")[0].scrollHeight);
$("#theId").on("keyup keydown", function() {
$(this).height(this.scrollHeight);
})
这样做可以高度自适应,但是重新回来,输入的时候,高度不会恢复。
方案2:
//jQuery实现textarea高度根据内容自适应
$.fn.extend({
txtaAutoHeight: function() {
return this.each(function() {
var $this = $(this);
if (!$this.attr('initAttrH')) {
$this.attr('initAttrH', $this.outerHeight());
}
setAutoHeight(this).on('input', function() {
setAutoHeight(this);
});
});
function setAutoHeight(elem) {
var $obj = $(elem);
return $obj.css({
height: $obj.attr('initAttrH'),
'overflow-y': 'hidden'
}).height(elem.scrollHeight);
}
}
});
$('#theId').txtaAutoHeight()
这个也可以高度自适应,但是同样回来要重新输入的时候,高度不会恢复。但是开始输入后就恢复高度了。
只有在tab切换,或者hide,show的时候会出现这种情况,解决方案:初始给定一个高度。
html中
min-height: 2rem
js中
$('#txtInput').css("height", 30);
$('#txtInput2').css("height", 30);
解决。