代码之家  ›  专栏  ›  技术社区  ›  Fil

防止表单提交时,我把任何搜索关键字的输入文本框,然后按回车键。使用Jquery

  •  0
  • Fil  · 技术社区  · 7 年前

    嗨,我在拉威尔刀片上有这个代码,

    <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中提交由此产生的此类错误。

    有什么办法吗?

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  1
  •   José Manuel Blasco    7 年前

    通过按窗体上的enter键返回false,可以禁用默认行为,方法如下:

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