且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

bootstrap input框回车后重新刷新页面问题

更新时间:2022-09-16 23:15:12

问题描述

在给bootstrap页面form表单中的input搜索框绑定回车事件后,输入完成点击回车搜索,页面会向后台发起两次请求,且会自动取消第一次请求,自动刷新页面导致不是你输入搜索条件查询到的结果,效果图如下

bootstrap input框回车后重新刷新页面问题

处理方案

处理方案是在input搜索框回车事件业务逻辑中,主动触发搜索事件之后返回false,让form表单不再进行列表刷新

页面代码如下

<form id="user-form">
    <input type="hidden" id="title" name="title" value="/">
    <input type="hidden" id="platform" name="platform" th:value="${platform}">
    <input type="hidden" id="filterFlag" name="filterFlag">
    <div class="select-list">
        <ul>
            <li>
                名称:<input type="text" name="fileName" id="fileName"/>
            </li>
            <li>
                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()" id="search"><i class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </li>
            <li style="float: right">
                    <button style="width: 40px;" class="btn btn-default btn-outline" type="button" onclick="$.table.search()" name="refresh" aria-label="刷新" title="刷新"><i class="glyphicon glyphicon-refresh icon-refresh"></i> </button>
                    <button style="width: 40px;" class="btn btn-default btn-outline" type="button" onclick="toggleCustomView()" name="customView" aria-label="Toggle custom view" title="Toggle custom view"><i class="glyphicon glyphicon glyphicon-eye-open"></i> </button>
            </li>
        </ul>
    </div>
</form>

js代码如下

//回车事件
$("#fileName").bind("keydown",function(e){
    // 兼容FF和IE和Opera
    var theEvent = e || window.event;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    //console.log(code);
    if (code == 13) {
        //回车执行查询
        $("#search").trigger("click");
        return false;
    }
});

其中在回车执行查询之后的 return false;不能缺少,缺少就会出现上述问题,加上之后效果正常,如下图

bootstrap input框回车后重新刷新页面问题