javascript - 具有硬编码响应的 HTML5 jQuery 聊天框界面

标签 javascript jquery html chat

我正在完成我的项目,只是想获得模拟的服务器响应或至少从用户输入中得到回显响应。整个想法是两条消息都应该显示在聊天框区域中。目前,硬编码未显示。这是我的 javascript/jQuery:

 <script>
$(document).ready(function(){
    $('#submitmsg')
        .bind('click', function(){
        var message = $('#usermsg').val();
        $('#chatbox').append('<p>' + message + '</p>');
        $('#usermsg').val('');
    });
        .bind('click', function(){
        var message = $('#usermsg').val();
        $('#chatbox').append('<p>' + message + '</p>');
        $('#usermsg').val('');
    });
  </script>

这是我的一些 html:

<body>
<div id="wrapper">
  <div id="menu">
    <p class="welcome">Welcome</p>
    <p class="logout"><a id="exit" href="window.top.close();">Exit Chat</a></p>
    <div style="clear:both"></div>
</div>

<div id="chatbox">
    <p>Here's our chat data</p>
</div>

<form name="message">
    <input name="usermsg" type="text" id="usermsg" size="63" />
    <button type="button" id="submitmsg" value="send">Send</button>    
</form>   

我正在尝试使用 .bind 方法来将初始消息以及对事件的编码响应联系起来,以便消息将同时输出到聊天框中,但它并没有这样做。

最佳答案

这样的事情怎么样?

jsfiddle Demo

$(document).ready(function() {
  $('#submitmsg')
    .bind('click', function() {
      var message = $('#usermsg').val();
      $('#chatbox').append('<p>' + message + '</p>');
      $('#usermsg').val('');
      serverResponse(message);
    });
});

function serverResponse(message) {
  $('#chatbox').append('<p>Server: ' + message + '</p>');
}
<div id="menu">
  <p class="welcome">Welcome</p>
  <p class="logout"><a id="exit" href="javascript:window.top.close();">Exit Chat</a></p>
  <div style="clear:both"></div>
</div>
<div id="chatbox">
  <p>Here's our chat data</p>
</div>
<form name="message">
  <input name="usermsg" type="text" id="usermsg" size="63" />
  <button type="button" id="submitmsg" value="send">Send</button>
</form>

关于javascript - 具有硬编码响应的 HTML5 jQuery 聊天框界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36960937/

相关文章:

javascript - getelementbyid 没有方法

javascript - selectAll ("rect") 选择所有矩形,但不对某些矩形应用鼠标悬停功能

javascript - 变量传递不起作用 - 值未定义

javascript - 无法单击按钮来切换类

javascript - 读取从 API REST 返回的 JSON 对象

html - 为什么这个 CSS @keyframes 规则没有淡入淡出?

javascript - 在angularjs中聚焦某个输入字段

javascript - Jquery调用PHP进行处理?

javascript - 如何找出 jquery 数组对象中的特定字符串?

javascript - 如何使 Textarea 充当密码字段