Question

我正在编写一个非常简单的聊天框。我在表单中写的文字在聊天区域中看不到。实际上，它是在chatarea之后的第二次和之后看到的。如何在聊天区域保留消息？（它在jsfiddle上正常工作，但在我的浏览器上却不正常）

$(document).ready(function() {
  $("#submitMsg").click(function() {
    var userMessages = $("#userMsg").val(); // stored content in the text box
    var prevMessage = $("#chatArea").html();
    $("#userMsg").val(""); // clear textbox
    $("#chatArea").html(prevMessage + "<br>" + userMessages);
  });
});

#wrapper {
  padding-bottom: 25px;
  background: #ACD8F0;
  ;
  width: 604px;
  border: 1px solid #ACD8F0;
}
#chatArea {
  width: 450px;
  border: 1px solid black;
  height: 450px;
  margin: auto;
  background: #fff;
}
#userMsg {
  position: relative;
  left: 75px;
  margin-top: 5px;
}
#submitMsg {
  position: relative;
  left: 80px;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="wrapper">
  <div id="header">
    <p class="Welcome">Welcome</p>
  </div>
  <div id="chatArea"></div>
  <form id="ChatInput">
    <textarea id="userMsg" name="message" type="text" placeholder="Enter your text here.." rows="3" cols="50"></textarea>
    <input type="submit" name="Send" value="SEND" id="submitMsg">
  </form>
</div>

Answer 1

问题出在您的提交按钮上。没有指定操作的表单默认为当前页面的GET / POST请求（因此重新加载它）。如果您从<input type="submit" name="Send" value="SEND" id="submitMsg">中删除'type =“submit”，它应该有效。或者，如果您将action="javascript:void(0);"添加到表单标记中，它也应该解决问题。

Answer 2

也许这可能？不确定这是否是您要查找的内容，但您可以使用事件对象来阻止默认操作。

$(document).ready(function() {
  $("#submitMsg").click(function(e) {
    e.preventDefault();
    var userMessages = $("#userMsg").val(); // stored content in the text box
    var prevMessage = $("#chatArea").html();
    $("#userMsg").val(""); // clear textbox
    $("#chatArea").html(prevMessage + "<br>" + userMessages);
  });
});

为什么文字会消失？

2 个答案: