jQuery处理textarea回车发送时空内容及换行传递问题

修复方案 #

问题1：非空判断失效仍发送空内容的根因与修复 #

• 原有判断text !== ""无法过滤全空白内容（仅包含空格、换行、制表符的内容）
• 未阻止回车键的默认行为，按下回车时textarea会自动插入换行符，导致即便清空输入框仍可能提交空白内容
  修复逻辑：先阻止回车默认行为，再对内容做trim去首尾空白后再做非空判断。

问题2：换行符无法正常传递展示的根因与修复 #

HTML无法识别渲染文本中的\n换行符，需要将内容中的换行符全局替换为HTML的<br>标签，或者使用支持保留原始文本格式的<pre>标签包裹内容。

修复后完整代码 #

$(".chat-end textarea").keypress(function (e) {
    if (e.which === 13) {
        // 阻止按下回车textarea自动插入换行的默认行为
        e.preventDefault();
        let text = $(this).val();
        // 过滤全空白内容
        if (text.trim() !== "") {
            // 全局替换换行符为HTML换行标签
            let renderedText = text.replace(/\n/g, '<br>');
            $(".chat-body").append(`<p>${renderedText}</p>`);
            // 清空当前触发事件的输入框，避免选错元素
            $(this).val('');
        }
    }
});

可选优化 #

如果需要保留输入内容的原始缩进、连续空格等格式，可以直接用<pre>标签包裹内容，无需单独替换换行符：

// 替换append逻辑即可
$(".chat-body").append(`<pre>${text}</pre>`);

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