从 textarea 中删除文本，然后按回车键

Question

我编写了一个代码，发送一条消息并向下滚动，然后用户按下 "Enter" 键。你可以在下面看到它：

$(document).keypress(function (e) {
    var target = $(e.target);
    if (e.which == 13 && target.is('#message')) {
      message = $('#message').val();
      if (message && /\S/.test(message)) {
        $.post('/users/send', {
          roomId: room.id,
          message: message
        }).done(function (res) {
          var response = JSON.parse(res);
          var lastmsg = JSON.parse(response.messages[response.messages.length - 1]);
          var lastmsgDate = new Date(lastmsg.date);
          if ('{{user.imgUrl}}') {
            $('#messages').append('<div class="container"><div class="my-message"><p>' + message + '</p><small class="date">' +
              lastmsgDate.getHours() + ':' + lastmsgDate.getMinutes() + '</small><img src="' + lastmsg.img + '" alt="avatar"></div></div>');
          } else {
            $('#messages').append('<div class="container"><div class="my-message"><p>' + message + '</p><small class="date">' +
            lastmsgDate.getHours() + ':' + lastmsgDate.getMinutes() + '</small></div></div>');
          }
        });
        var height = $('#messages')[0].scrollHeight;
        $('#messages').scrollTop(height);
        $('#message').val('');
      }
    }
  });

我认为它应该可以正常工作，但\n 停留在文本区域。此外，它不会向下滚动。我该怎么办？

对不起我的错误代码

Answer 1

问题是：当你按下回车键时，你的函数运行并做它需要做的事情，然后它继续事件的默认行为（按下键 'Enter'），所以它跳了一行. （它没有让“\n”在你的函数之前被创建运行）

我所做的是：在 if 语句检查输入是否正确且目标是否正确之后，调用 preventDefault() 这将防止该行被回车键跳转。另外，调用 .focus() 以确保焦点在文本区域中，现在在开头。

$(document).keypress(function (e) {
    var target = $(e.target);
    if (e.which == 13 && target.is('#message')) {
        e.preventDefault()
        message = $('#message').val();
        if (message && /\S/.test(message)) {  
            //ADD your logic and call here
            //...
            $('#message').val('');                        
            $('#message').focus();
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message"></textarea>

（我删除了您的 AJAX post 调用，以便能够在此处创建工作代码段。）

从 textarea 中删除文本，然后按回车键

Remove text from textarea then pressing enter key

jquery

scroll

textarea

chat