javascript - 第二次按下后 Jquery Keypress 被识别

Question

<form class="navbar-form navbar-right" role="search">
    <div class="form-group">
        <input id="search_text" type="search" class="form-control" placeholder="Search" size="30">
        <div class="form_control" id="search_info" style="width:283px;height:125px;top:86%;position:absolute;background-color:white; border: 1px solid #dce4ec;border-radius: 4px;display:none;"></div>
    </div>
   </form>

$("#search_text").keypress(function (){
    if($("#search_text").val().length == 0)
    {
        $("#search_info").hide();
    }
    else if($("#search_text").val().length != 0)
    {
        $("#search_info").show();
    }
});

我的问题是，使用此代码它只会显示 $(“#search_info”)在第二次按键时。例如，如果我在搜索字段中输入内容 $("#search_text"), $("#search_info") 应该在第一次按下时显示，但事实并非如此，当我在搜索字段中输入多个字符时，它会显示 $("#search_info")。

我似乎无法弄清楚。

Answer 1

使用 keyup 而不是 keypress - 因为当按键触发时，值尚未插入到输入中。

$("#search_text").keyup(function (){
    if($("#search_text").val().length == 0)
    {
        $("#search_info").hide();
    }
    else if($("#search_text").val().length != 0)
    {
        $("#search_info").show();
    }
});

http://jsfiddle.net/qxh3x2s6/