jquery keyup show/hide 退格时保持显示

Question

所以我得到了这个 fiddle：https://jsfiddle.net/htz8x1no/ 基本上运行这段代码：

      $('.relevant-results').hide();

      $('#input').keyup(function() {
        if ($(this).val().length < 3) {
          $('.relevant-results').hide();
        } else {
          $('.relevant-results').show();
        }
      });

当您在输入中输入超过 3 个字符时，它会显示 div，否则会隐藏它。这按预期工作，但我想在用户删除（退格）它的一部分时保持 div 可见。

所以这个keyup函数应该只在用户第一次输入时运行。 jQuery/JS 可以做到这一点吗？

Answer 1

像这样使用退格键代码。

$('.relevant-results').hide();

$('#input').keyup(function (e) {
  if ($(this).val().length < 3) {
    if (e.keyCode == 8) {
    } else {
      $('.relevant-results').hide();
    }
  } else {
    $('.relevant-results').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input">
<div class="relevant-results">
  Hello
</div>

Answer 2

您可以只测试输入是否大于或等于 3，然后显示 div。不需要逻辑隐藏它。

$('.relevant-results').hide();
      
$('#input').keyup(function() {
   if ($(this).val().length >= 3) {
      $('.relevant-results').show();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input">
<div class="relevant-results">
  Hello
</div>

jquery keyup show/hide 退格时保持显示

jquery keyup show/hide stay shown when backspaced

javascript

jquery

hide

show

keyup