使输入标签动态化

Question

我正在设计一个像web whatsapp一样的聊天应用程序。

我有一个名为 chat-body 的类，其中显示了消息，我有另一个名为 chattext 的类，用户可以在其中输入任何消息想发送。

现在，我的问题是如何让它变得动态？

（即如果用户在chattext输入标签中输入了一些文本并按下Enter键，则输入的文本应显示在聊天体类中。

<div class="chatbody">
  <div class="chatlogs">
    <div class="chatm self">
      <p class="chat-message">Hi rishabh<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm friend">
      <p class="chat-message">Hi nishant<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm self">
      <p class="chat-message">how r u<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm friend">
      <p class="chat-message">thk hain, tm sunao..?<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm self">
      <p class="chat-message">Hm v thk hain<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm friend">
      <p class="chat-message">Aur kya ho rha h<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm self">
      <p class="chat-message">Just chiling...tm kya kr rhe??<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm friend">
      <p class="chat-message">Kch v nai..baithe hun<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm self">
      <p class="chat-message">Aur btao kch naya<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm friend">
      <p class="chat-message">Sb wai kch naya nai<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm self">
      <p class="chat-message">haha..same here<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm friend">
      <p class="chat-message">haha..same here<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>
    <div class="chatm self">
      <p class="chat-message">I cannot even imagine where I would be today were it not for that handful of friends who have given me a heart full of joy. Let's face it, friends make life a lot more fun<br><time style="color: gray;float: right">10.00</time></p>
    </div>
    <br>

  </div>
</div>

<div class="chattext">
  <i style="color:gray;font-size: 24px;padding-left: 5px;padding-right: 5px;" class="fa fa-smile-o" aria-hidden="true"></i>
  <input type="text" name="" placeholder="Type a message">
  <i style="color:gray;font-size: 27px;padding-left: 20px;" class="fa fa-microphone" aria-hidden="true"></i>
</div>

Answer 1

您必须使用Ajax功能发布聊天文本，但正如您所说，您需要检测Return Key，这里是它的功能

 $(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter button!');
    }
});

Answer 2

尝试在输入中添加表单

<form action="#" method="post">
   <input id="input_field_id" type="text" name="txt" onkeypress="handle(event)" />
</form>

function handle(e){
    if(e.keyCode === 13){
       e.preventDefault(); // Ensure it is only this code that rusn

       var message = $("#input_field_id").val();

       if(message == ""){
          alert("please enter message");
       }else{
          var html = '<div class="chatm self">' +
          '<p class="chat-message">'+message+'<br><time style="color: gray;float: right">10.00</time></p>' +
          '</div>';
          $(".chatlogs").append(html);
       }

       return false;

    }
}

Answer 3

$('#input_field_id').bind("enterKey",function(e){
     //do stuff here
});
   $('#input_field_id').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});