如何连接按钮输入没有形式？我希望用户能够使用回车键

Question

所以我不认为在这个输入字段上使用表单标记（导致每个后端的bug）

如果选择/激活输入以激活提交，我将如何允许用户使用回车键？

用户可以手动点击添加组提交按钮，或者他们可以点击标签，但他们不能只输入点击：（

表格

<input type="text"
       id="group-code" value="Type your Group Code Here" name="Type your Group Code Here"
       onblur="if (this.value == '') {this.value = 'Type your Group Code Here';}"
       onfocus="if (this.value == 'Type your Group Code Here') {this.value = '';}"
       autocomplete="off"/>

<button class="btn" id="btn_join_group">add group</button>
<!--<input type="submit" id="btn_join_group" form="group-code" value="add group"/>-->

的jQuery

$('#btn_join_group').unbind('click').bind("click", function(event) {

    var newGroup = $('#group-code').val();

    // Send Group code to server
    WHOAT.networking.getToServerWithAjax('/groups/join', newGroup, function (response) {
        var res = JSON.parse(response);

        if (res.result === 'success') {
            notification.setStatusAndFadeStatus(response);

        } else if (res.result === 'error') {
            notification.setStatusAndFadeStatus(response);
        }
    });
});

Answer 1

您可以使用keypress活动

$('#group-code').on('keypress', function (e) {
    var keyCode = e.which;
    if (keyCode == 13) {
        //Trigger click event
        $('#btn_join_group').trigger('click');
    }
});

Answer 2

你可以为这样的输入添加一个监听器：

$('#group-code').keypress( function (e) {
    if (e.keyCode === 13) 
        sendAjax();
});

然后将AJAX块包装在名为sendAjax的函数中。此代码未经测试，但该想法应该有效。

Answer 3

将按键事件添加到输入并检查是否按下回车键是否触发按钮功能。

$('input').on('keypress',function(event){
 if(event.keyCode == [the enter key code])
   //trigger the button click
})