從聊天框中隱藏 div

Question

所以基本上這個概念是，每當用戶輸入任何消息並按回車鍵時，他的消息都會出現在聊天框中，但問題是，空消息（只有空格鍵> 1）也出現在框中。 我如何隱藏只有空格鍵的 div。

這是代碼

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

var textbox = document.getElementById("box");
message.addEventListener("click", nayaText);
message.addEventListener("keyup", textSend);

function nayaText() {
    if (message.value != " ") {
        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 = " ";
    }
    if (!message.trim().length) {
        naya.style.display = "none";
        message.value = " ";
    }


}


function textSend() {

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

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>

Answer 1

它必須是

if(message.value!=" ")

部分。 我會修剪消息並將其與空字符串進行比較。

if((message.value.trim())!=="")