本文介绍如何在 textarea 高度由外部元素动态决定的前提下，精准限制其最大行数，防止因自动换行（软换行）导致内容超出可视区域，同时兼容输入、粘贴、回车等所有触发场景。
在 Web 开发中，仅靠 rows 属性或监听 Enter 键无法真正限制 <textarea> 的实际显示行数——因为当文本宽度超出容器时，浏览器会自动进行软换行（soft wrap），产生额外的视觉行，而这些行不会被 \n 字符捕获，导致 value.split('\n').length 失效。尤其在你的场景中，textarea 高度需实时匹配另一个可拖拽调整的 <div>（如 #resizable-div），且行高固定为 24px，此时必须基于渲染后的实际行数而非纯换行符数量进行控制。
✅ 正确思路：用 scrollHeight 与 line-height 推算当前行数
textarea.scrollHeight 表示内容完整渲染所需的高度（含隐藏部分），结合已知的单行高度（24px），可反推当前实际占用行数：
const lineHeight = 24;
const currentLines = Math.ceil(textArea.scrollHeight / lineHeight);
const maxLines = Math.floor(resizeDiv.offsetHeight / lineHeight);
if (currentLines > maxLines) {
// 截断至恰好 fit maxLines 的内容
textArea.value = trimToMaxLines(textArea, maxLines, lineHeight);
}但注意：scrollHeight 在 input 事件中可能尚未更新（尤其在快速输入时）。因此更稳健的做法是 在 input + keydown + paste 三事件上统一处理，并辅以 setTimeout(..., 0) 确保 DOM 渲染完成后再读取 scrollHeight。
✅ 推荐实现方案（修复你原有逻辑）
const resizeDiv = document.getElementById('resizable-div');
const textArea = document.getElementById('text-area');
const lineHeight = 24;
// 辅助函数：将 textarea 内容裁剪至最多 maxLines 行（按视觉高度）
function trimToMaxLines(textarea, maxLines, lineHeight) {
const originalValue = textarea.value;
let start = 0;
let end = originalValue.length;
// 二分查找最大合法长度（避免逐字符截断性能差）
while (start < end) {
const mid = Math.floor((start + end + 1) / 2);
textarea.value = originalValue.substring(0, mid);
textarea.style.height = 'auto'; // 触发重排
const lines = Math.ceil(textarea.scrollHeight / lineHeight);
if (lines <= maxLines) {
start = mid;
} else {
end = mid - 1;
}
}
textarea.value = originalValue.substring(0, start);
return textarea.value;
}
// 统一处理函数
function enforceLineLimit() {
const maxLines = Math.floor(resizeDiv.offsetHeight / lineHeight);
// 异步确保 scrollHeight 准确（等待渲染）
setTimeout(() => {
const lines = Math.ceil(textArea.scrollHeight / lineHeight);
if (lines > maxLines) {
trimToMaxLines(textArea, maxLines, lineHeight);
// 可选：聚焦并置光标到末尾，提升体验
textArea.focus();
textArea.setSelectionRange(textArea.value.length, textArea.value.length);
}
}, 0);
}
// 绑定关键事件（覆盖所有输入途径）
['input', 'keydown', 'paste'].forEach(event => {
textArea.addEventListener(event, enforceLineLimit);
});
// 同时监听 resizeDiv 尺寸变化（如拖拽结束）
resizeDiv.addEventListener('mouseup', () => {
// 调整 div 高度后，重新校准 textarea 行数限制
changeHeight();
enforceLineLimit(); // 立即应用新限制
});⚠️ 关键注意事项
- 禁用默认换行行为无效：event.preventDefault() 在 input 中对软换行无作用，必须事后截断。
- 不要依赖 offsetHeight 或 clientHeight：它们返回的是元素自身设置的高度，而非内容实际高度。
-
resize: none 和 overflow: hidden 是必需的，否则用户可能滚动看到溢出内容：
#text-area { resize: none; overflow: hidden; line-height: 24px; /* 确保字体大小与行高协调，避免意外撑高 */ } - 移动端兼容性：iOS Safari 对 scrollHeight 更新有延迟，建议增加 textarea.style.height = 'auto' 强制重排。
- 性能优化：对长文本使用二分查找截断（如上），避免 for 循环逐字符试探。
✅ 总结
真正的“行数限制”本质是视觉高度限制。与其统计 \n 或猜测字符数，不如直接测量 scrollHeight 并与容器高度比对。结合事件防抖、异步读取、二分截断与样式约束，即可在动态布局中稳定实现「所见即所得」的行数控制——既满足设计约束，又不牺牲用户体验。
