Срабатывание кнопки после нажатия на Enter

Question

Столкнулся с проблемой, есть чат, чат отправляет запросы и обновляет таблицу чата по средством Ajax но почему-то при вводе текста в строку нужно "Курсором" наводить на кнопку отправить что не является удобным для большинства юзеров на моем сайте, как сделать так чтобы кнопка срабатывала после нажатия на клавишу Enter? вот код -

div class="mainchat" id="chatik">

    <div id="chatblock">

    </div>
    <?
    if ($_SESSION['USER_LOGIN_IN'] == 1) {
    ?>
        <div class="chatsender">
                <input type="text" class="chattext" id="chatmessange" autocomplete="off" required>
                <input type="submit" id="chatsubmit" class="chatsubmits" value="Отправить">
        </div>
    <?
    } else {
    ?>
        <div class="chatnouser"><span>Только для зарегестрированных пользователей</span></div>
    <?
    }
    ?>
</div>

ajax обработчик -

    $(document).ready(function() {
    var button = $("#chatsubmit");
    button.click(function() {
        var text = $("#chatmessange").val();
        if (text == "") {
            alert("Текста нет, ебалай");
        } else {
            $.ajax({
                url: "/catr/get",
                type: "POST",
                data: ({
                    text: text
                }),
                success: function() {
                    $("#chatmessange").val("");
                }
            });
        }
    });
    window.setInterval(function() {
        $.ajax({
            url: "/catr/show",
            success: function(data) {
                $("#chatblock").html(data);
            }
        });
    }, 1000);
});

Answer 1

Нужно добавить слушатель события keypress на поле ввода текста сообщения:

$('#chatmessage').on('keypress', function(e){
    if(e.key == 'Enter'){
        $('#chatsubmit').trigger('click');
        // Отмена действия по умолчанию
        return false;
    }
});

EDITED

Answer 2

Используй первую комментированную строку, если .yourInput динамически создается

Про евент: ключ-вныз тут

// $('body').on('keydown', '.yourInput', (e)=>{
$('.yourInput:first').keydown((e)=>{
    if(e.keyCode === 13 || e.key === 'Enter'){
        e.preventDefault(); // удаляем "обновление" страницы
        $('.yourConfirmButton').click();
    }
});

БЛОГ НА HUSL

Срабатывание кнопки после нажатия на Enter

Ответы (2 шт):

EDITED