javascript - 将带有 'enter' 键的用户文本附加到 ul(聊天框)jQuery

Question

我正在使用 jQuery 设计一个聊天框。 我想使用“Enter”键将包含用户文本的 li 附加到 ul (没有 PHP 或任何服务器)，但它不起作用。

我的代码如下所示:

var txt = "<b>me:</b>"+$(".usertext").val();
var myli = $("<li>").html(txt);
$('chav_box_in').keypress(function(e) 
{
    if ( $(".usertext").val() != "" )   
    {
        if (e.keyCode == 13)
        {
            $("#send").click(function(){
                $("#chatlog").append(myli);
                $(".usertext").val("");
            })
        }
    }
});

My chat .

Answer 1

每次按下 Enter 键时，您都会在 #send 元素上创建一个单击事件监听器，而不是实际触发该事件。

如果您打算按 Enter 键并单击“发送”按钮来添加消息，您可以创建一个函数并将其作为参数传递给 jQuery 事件监听器方法

function appendChat(e) {
    var id = e.target.id;
    //variables for testing, you could have all of the
    //comparisons in the 'if' statement, just using these to
    //make the 'if' statement more clear
    var notEmpty = $(".usertext").val() != "",
        isEnterKeypress = e.type == "keypress" && e.keyCode == 13,
        isSendClick = e.type == "click" && id == "send";

    if( notEmpty && (isEnterKeypress || isSendClick) ) {
       var txt = "<b>me:</b>"+$(".usertext").val();
       $("#chatlog").append($("<li>").html(txt));
       $(".usertext").val("");
    }
}

$("#send").click(appendChat);
$(".chav_box_in").keypress(appendChat);

演示

function appendChat(e) {
  var id = e.target.id;
  var notEmpty = $(".usertext").val() != "",
      isEnterKeypress = e.type == "keypress" && e.keyCode == 13,
      isSendClick = e.type == "click" && id == "send";

  if( notEmpty && (isEnterKeypress || isSendClick) ) {
    var txt = "<b>me:</b>"+$(".usertext").val();
    $("#chatlog").append($("<li>").html(txt));
    $(".usertext").val("");
  }
}

$("#send").click(appendChat);
$(".chav_box_in").keypress(appendChat);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="chatlog"></ul>
<input class="usertext chav_box_in"><button id="send">Send</button>