jQuery 自动检测输入状态

Question

我正在尝试让 div 在常规输入框中输入时出现和消失。它应该仅在输入有内容时切换为可见，而无需按钮或输入框外的操作。

我尝试了几种选择。使用 .change 时，当我在输入之外单击鼠标时，它只会更新 div 的状态。

如果我使用 .val() == '' 和 .addClass（如果为空），它不会在值更改时切换 class 的状态。

我将使用 .val() 添加我最近的尝试，

<div id="bd_search">
  <div class="inner">
    <input class="inptsrch" type="text"  placeholder="Perform your search here.." />
  </div>
</div>

<div id="bd_search_res">
  <div class="inner">
    <div class="res_col1">
      Results from Category A.
    </div>
       <div class="res_col2">
      Results from Category B.
    </div>
  </div>
</div>

$(document).ready(function(){
    if($('input.inptsrch').val() == ''){
    $( "#bd_search_res" ).addClass( "srcresHide" );
    }
});

有人通过 jquery 体验过这种行为吗？

https://jsfiddle.net/johneilif/r4uh3dag/

Answer 1

使用 keyup 事件来检查用户何时按下任意键并且输入是否具有某些值（if else 此处的条件执行此操作）并基于 val()输入，如果为空或不为空，添加或删除所需的class.

$(document).ready(function(){
    $("input.inptsrch").keyup(function(){
        if($(this).val() == ''){
            $( "#bd_search_res" ).addClass( "srcresHide" );
        }
        else{
            $("#bd_search_res").removeClass( "srcresHide" );
        }
    });
});

Answer 2

你可以这样做：https://jsfiddle.net/r4uh3dag/15/

$("input.inptsrch").keyup(function(){
    if($(this).val() != ''){
        $( "#bd_search_res" ).show();
    }
    else{
        $("#bd_search_res").hide();
    }
});

jQuery 自动检测输入状态

jQuery autodetect input state

search

jquery

hide