按 'Enter' 调用函数

Question

这是我的 HTML 代码：

<div class="panel-footer">
    <div class="input-group">
        <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
        <span class="input-group-btn">
            <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
        </span>
    </div>
</div>

这是我的 jQuery 代码：

$('.message').keypress(function (e) {
    if (e.which == 13) {
        var msg = $(this).val();
        var id = $(this).closest('span').next('button.btn_chat').val();
        alert(id+"      "+msg);
        sendMessage(msg,id);
    }
    e.preventDefault();
});

这是我的发送消息功能：

var sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

现在我想调用其中的 sendMessge 函数，当消息写入后按下输入按钮时。

但是当我按下回车键时，我的 jQuery 不是运行。我该如何解决这个问题？

Answer 1

您正在使用线路

var id = $(this).closest('span').prev('button.btn_chat').val();

然而，在这种情况下，$(this) 是一个 <input> 元素，它不在 <span> 中。因此 .closest('span') 将返回一个空集。

Answer 2

Angular提供机制，你可以创建一个form并使用ngSubmit绑定函数在表单提交时执行。

因此，当按下 Enter 时，将提交表单。

HTML

<div class="panel-footer">
    <div class="input-group">
        <form ng-submit="sendMessage(messageToSend, 79)">
            <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" /> 
          <span class="input-group-btn">
                <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
          </span>
        </form>
     </div>
</div>

在你的控制器中添加方法

$scope.sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

如果不想用form，那么可以用ngKeyup

<input ng-keyup="$event.keyCode == 13 ? sendMessage(messageToSend, 79): null" ng-model="messageToSend" >

按 'Enter' 调用函数

Call function on 'Enter' press

html

javascript

jquery

enter

angularjs