如何用HTML/JavaScript清除文本框中的回车或换行符？

这个问题很常见——你没阻止回车键在输入框里的默认换行行为！浏览器默认按下回车会给文本框（尤其是<textarea>）添加换行符，这就是为什么提交后文本框里会出现多余换行的原因。下面给你两种实用的解决方案：

方案1：基础版（单行文本文框或不需要换行的多行框） #

监听输入框的keydown事件，当检测到回车键时，先调用event.preventDefault()阻止浏览器的默认换行行为，再执行你的提交逻辑：

// 获取你的消息输入框元素
const messageInput = document.getElementById('messageInput');

messageInput.addEventListener('keydown', function(event) {
    // 检测是否按下回车键
    if (event.key === 'Enter') {
        // 阻止默认的换行行为
        event.preventDefault();
        // 去除输入内容首尾的空白（包括换行、空格）
        const message = messageInput.value.trim();
        
        if (message) { // 避免发送空消息
            // 执行你的消息提交逻辑，比如sendMessage是你已有的函数
            sendMessage(message);
            // 清空输入框
            messageInput.value = '';
        }
    }
});

方案2：进阶版（支持多行输入的textarea） #

如果你的输入框是<textarea>，用户可能需要换行输入，这时候可以设置按Enter提交，按Shift+Enter换行，兼顾两种需求：

const messageInput = document.getElementById('messageInput');

messageInput.addEventListener('keydown', function(event) {
    // 只有当按下Enter且没有按住Shift时，才触发提交
    if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        const message = messageInput.value.trim();
        
        if (message) {
            sendMessage(message);
            messageInput.value = '';
        }
    }
    // 按住Shift+Enter时，保留默认的换行行为，无需额外处理
});

小细节提醒 #

用keydown事件比keyup更合适：keydown会在浏览器处理默认换行行为前触发，能直接阻止换行产生；而keyup是按键抬起后触发，这时候浏览器已经给输入框加了换行，再清空虽然也能解决，但不如keydown高效。

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