如何限制textarea的用户输入行数，禁止超出设置的rows值？

要实现限制textarea最多4行输入，可通过JavaScript监听输入事件，实时计算当前文本行数并阻止超出行为，具体实现如下：

实现代码 #

HTML（保留你原有的textarea） #

<textarea id="ta"
          name="message"
          rows="4"
          cols="40"
          maxlength="100">
</textarea>

JavaScript #

const textarea = document.getElementById('ta');
const maxRows = 4;

// 实时处理输入内容，防止粘贴等方式插入多行
textarea.addEventListener('input', function() {
    // 统计换行符数量，加1得到当前总行数
    const lineCount = (this.value.match(/\n/g) || []).length + 1;
    if (lineCount > maxRows) {
        // 截断内容，只保留前4行
        const lines = this.value.split('\n').slice(0, maxRows);
        this.value = lines.join('\n');
        // 重置滚动条，避免出现滚动条
        this.scrollTop = 0;
    }
});

// 提前阻止回车键，避免直接输入第5行
textarea.addEventListener('keydown', function(e) {
    const lineCount = (this.value.match(/\n/g) || []).length + 1;
    if (e.key === 'Enter' && lineCount >= maxRows) {
        e.preventDefault();
    }
});

说明 #

• input事件覆盖粘贴、拖拽等所有输入场景，确保内容不会超出4行
• keydown事件拦截回车键，从源头阻止用户新增第5行
• 通过统计换行符数量计算行数，逻辑简单直接
• 超出时自动截断内容并重置滚动条，保持textarea始终显示4行内容

内容的提问来源于stack exchange，提问作者johnb928