在聊天框中使用if条件

Question

我只是不知道如何在这里使用IF条件，我也使用冒泡聊天，所以当文本字段为空时，冒泡聊天就会在没有任何文本的情况下更新。我不希望it.So为它正确使用IF条件。

​

 window.onload = function() {
  document.getElementById("myText").focus();
  };
  function typo(){
   var currentText = document.getElementById("demo").innerHTML;
  var x = '<div><p class=bubble>' + document.getElementById("myText").value + '</p></div>';
  document.getElementById("myText").value = "";
  var y = document.getElementById("demo").innerHTML = currentText + x;
  var z = document.getElementById('demo');
  z.scrollTop = z.scrollHeight;
  }
 var input = document.getElementById("myText");
 input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
  document.getElementById("btn-chat").click();
  }
  });

<div class="container">
  <div class="row">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <span class="glyphicon glyphicon-comment"></span> Chat
        <div class="btn-group"></div>
      </div>
    </div>
  </div>        
  <div class="bottom">
    <p id="demo"></p>
    <input class="widebox" type="text" id="myText" value="">
    <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
  </div>
</div>

这里是演示小提琴

​

Answer 1

您可以检查以确保至少有一个字符的长度。

在查看了您添加的演示之后，还可以通过使用trim()检查来确保空白已经消失。

if (event.keyCode === 13 && input.value.trim().length > 0) {

https://jsfiddle.net/kkjbryqe/8/

Answer 2

if (event.keyCode === 13 && input.value.length)...可以工作吗？

Answer 3

我在我的问题..So下面贴出了一个演示，我可以更清楚地知道我在做什么，并感谢大家花时间研究我的问题，帮助我解决问题。我真的很感激