textarea高度根据输入内容自动调整高度

在前端开发中，实现一个 textarea 元素的高度根据输入内容自动调整，同时限制其最大高度为 6 行，通常涉及到监听输入事件，并动态调整 textarea 的高度。下面是一个使用 JavaScript 和 CSS 实现此功能的示例：

HTML:

<textarea id="auto-height-textarea" rows="1" placeholder="输入内容，高度会自动调整"></textarea>

CSS:

	#auto-height-textarea { 

	resize: none; /* 禁止用户手动调整大小 */ 

	min-height: 2em; /* 设置最小高度，通常是行高的倍数 */ 

	max-height: 12em; /* 设置最大高度，这里是6行，假设行高为2em */ 

	padding: 0.5em; /* 适当的内边距 */ 

	box-sizing: border-box; /* 确保内边距和边框包含在元素的总高度内 */ 

	}

JavaScript:

document.addEventListener('DOMContentLoaded', function() { 
const textarea = document.getElementById('auto-height-textarea'); 


function adjustTextareaHeight() { 
textarea.style.height = 'auto'; // 去除之前的高度限制 
textarea.style.height = Math.min(textarea.scrollHeight, 12 * textarea.offsetHeight / textarea.rows) + 'px'; 
} 


// 监听输入事件 
textarea.addEventListener('input', adjustTextareaHeight); 


// 监听窗口大小变化，以防页面布局变化导致行高变化 
window.addEventListener('resize', adjustTextareaHeight); 


// 初始时设置一次高度 
adjustTextareaHeight(); 
});

 

在这个示例中，我们首先在 CSS 中设置 textarea 的 resize 属性为 none 以禁止用户手动调整大小。min-height 和 max-height 分别设置了 textarea 的最小和最大高度，假设每行的高度是 2em，那么 max-height 设置为 12em 以对应 6 行的高度。

在 JavaScript 中，我们监听 input 事件以在用户输入时调整 textarea 的高度。函数 adjustTextareaHeight 会在每次输入时调用，并设置 textarea 的高度为 auto 来获取其内容的滚动高度，然后将其限制在最大高度内。注意这里用到了 textarea.offsetHeight / textarea.rows 来计算每行的高度，这样可以适应不同字体大小和行高设置。

此外，我们还监听了 resize 事件，以处理浏览器窗口大小变化时可能导致的行高变化。

最后，在文档加载完成后，我们调用 adjustTextareaHeight 函数一次，以确保初始状态的高度也是正确的。

请注意，这个示例假设了行高为 2em，实际使用时你可能需要根据你的样式和字体调整这个值。此外，如果你使用了外部 CSS 框架或库，可能还需要考虑它们对 textarea 的样式和行为的影响。