javascript - 当我在输入文本框中输入任何搜索关键字然后按 Enter 时，阻止表单提交。使用 Jquery

Question

嗨，我在 Laravel Blade 上有这个代码，

<h1 class="" id="module-users-h1">Search User</h1>

<form class="" id="module-user-search" action="" method="post">
    <div class="field has-addons">
        <div class="control is-expanded">
            <input class="input" type="text" name="user" id="module-user-search-input" placeholder="Find user">
        </div>
        <div class="control">
            <button type="button" class="button is-info" id="module-user-button" name="button">Seach</button>
        </div>
    </div>
</form>

搜索功能。

我有这个 JavaScript 代码，

/**
 * Perform search user -------------------
 *
 * @return void
 */
$('#module-user-button').click(function(e) {
    let formData = $(this).parents('form').serialize();

    axios.get('/modules/getuser/' + formData.split('=')[1])
    .then((response) => {
        console.log(response.data);
    });
});

$('#module-user-search-input').keyup(function (e) {
    e.preventDefault();

    if (e.keyCode === 13) {
        $('#module-user-button').click();
    }
});

除了单击按钮之外，我还想在按下回车键时执行搜索。

问题是，当我在输入文本框中输入任何用户名作为搜索关键字然后按 Enter 时。表单将提交，导致 Laravel 中出现此类错误。

对此有什么想法或解决方案吗？

Answer 1

您可以通过在表单中​​按 Enter 键返回 false 来禁用默认行为:

$(document).on("keypress", "#module-user-search", function(event) 
{ 
    if (event.keyCode == 13)
        return false;
});