<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>测试</title>
<link rel="stylesheet" href="/_/_js/layui/css/layui.css">
<link rel="stylesheet" href="/_/_css/base.css">
<script src="/_/_js/layui/layui.js"></script>
<script src="/_/_js/jquery-1.10.1.min.js"></script>
</head>
<body>
<textarea autoHeight="true" style='overflow-y:hidden' class="layui-textarea">
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
阅谁问君诵,水落清香浮。
</textarea>
<script>
$(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();
})
</script>
</body>
</html>
效果图: