可以通过以下步骤实现:
$(document).ready(function() {
var maxRows = 5; // 设置最大行数
var lineHeight = parseInt($('#myTextarea').css('line-height')); // 获取行高
var maxHeight = maxRows * lineHeight; // 计算最大高度
$('#myTextarea').on('input', function() {
var textareaHeight = this.scrollHeight; // 获取textarea的实际高度
if (textareaHeight > maxHeight) {
$(this).css('height', maxHeight); // 超过最大高度时,设置固定高度
$(this).css('overflow-y', 'scroll'); // 显示垂直滚动条
} else {
$(this).css('height', textareaHeight); // 否则,根据内容自动调整高度
$(this).css('overflow-y', 'hidden'); // 隐藏垂直滚动条
}
});
});
上述代码中,我们首先定义了最大行数maxRows,然后通过获取行高lineHeight和计算最大高度maxHeight来限制textarea的高度。接着,我们使用input事件监听textarea的输入变化,根据内容的实际高度来动态调整textarea的高度,并根据需要显示或隐藏垂直滚动条。
这样,当用户在textarea中输入内容时,它的高度会根据内容的行数自动调整,并在超过最大行数时显示垂直滚动条。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云