我看了你的代码，问题出在输入校验的逻辑上——你现在只判断了输入不等于单个空格，但多个空格的情况就绕过去了，而且后面的判断还可能因为变量未定义报错。咱们来一步步修复：

核心思路 #

要过滤纯空格的消息，关键是用trim()方法去除字符串前后的所有空白字符（包括多个空格、制表符等），然后判断处理后的字符串是否为空。如果为空，就不创建消息元素。

修改后的JavaScript代码 #

var message = document.getElementById("tarea");
var textbox = document.getElementById("box");

message.addEventListener("click", nayaText);
message.addEventListener("keyup", textSend);

function nayaText() {
    // 先去除前后空格，获取处理后的内容
    const trimmedValue = message.value.trim();
    // 只有处理后内容不为空时，才创建消息元素
    if (trimmedValue) {
        let naya = document.createElement("div");
        naya.style.width = "100px";
        naya.style.height = "30px";
        naya.style.border = "1px solid rgb(255, 153, 0)";
        naya.style.marginTop = "4px";
        naya.innerHTML = message.value; // 保留原始输入的格式（比如中间的空格）
        textbox.appendChild(naya);
    }
    // 清空输入框，不管有没有发送成功
    message.value = "";
}

function textSend() {
    if (event.keyCode === 13) {
        event.preventDefault();
        message.click();
    }
}

关键修改点说明 #

• 用message.value.trim()获取去除前后空白的内容，只要这个结果不为空，才创建消息div，从根源上避免了纯空格消息被添加
• 移除了原来可能导致naya未定义的错误判断，逻辑更简洁清晰
• 清空输入框的操作放在最后，不管是否发送了有效消息，都统一重置输入框

你的HTML代码（已格式化） #

<div class="card">
    <div class="card-header bg-warning">
        <img id="profilep" class="rounded-circle" src="as.jpg">
        <div id="info">
            <label id="uname">Suraj Surya</label><br>
            <label id="lastseen">12:00am</label>
        </div>
    </div>
    <div class="card-body ">
        <div class="box" id="box"></div>
    </div>
    <div class="card-footer">
        <span><i id="paisa" class="fas fa-rupee-sign"></i></span>
        <span><input type="text" placeholder="type here..." id="tarea" required ></input></span>
        <span><i id="more" class="fas fa-chevron-up"></i></span>
    </div>
</div>

这样修改后，用户输入纯空格（不管多少个）的时候，都不会在聊天框里创建消息元素，完美解决你的问题~

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