如何检测文本输入上的退格键更改？

Question

如何检测文本输入上的任何退格键变化？ 我已经尝试过.change()和.keyup()但是这些都没有做。

为了产生这个 ：

1-在文本框中输入i （列表将被过滤）
2-将另一个i添加到类似于ii的文本框中
3-使用Backspace或“选择并删除”删除最后一个i 。 虽然有些项目包含i但列表中没有任何显示

 $("#filter").keyup(function(){ let val = $(this).val() if(val==""){ $('.list-group-item').show('slow'); } $(".list-group-item").each(function(){ $('.list-group-item:not(:contains('+ val +'))').hide('slow'); }); setTimeout(function(){ if( $(".list-group-item:visible").length ==0){ $(".alert-danger").removeClass('d-none'); } }, 1000); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" type="text" id="filter" placeholder="Search" aria-label="Search"> <ul class="list-group ckeck-div"> <li class="list-group-item animated">Morbi leo risus</li> <li class="list-group-item animated">Porta ac consectetur ac</li> <li class="list-group-item animated">Vestibulum at eros</li> <li class="list-group-item animated">Morbi leo risus</li> <li class="list-group-item animated">Porta ac consectetur ac</li> <li class="list-group-item animated">Vestibulum at eros</li> </ul> 

Answer 1

问题不是退格，而是您的if(val==""){引起了问题。 我已修改您的代码以使其正常工作，并切换了显示和隐藏

 $(document).on("input","#filter",function(){ let val = $(this).val(); if(val==""){ alert('Please enter in a search string'); } $('.list-group-item').hide(); $('.list-group-item:contains('+ val +')').show('slow'); setTimeout(function(){ if( $(".list-group-item:visible").length ==0){ $(".alert-danger").removeClass('d-none'); } }, 1000); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" type="text" id="filter" placeholder="Search" aria-label="Search"> <ul class="list-group ckeck-div"> <li class="list-group-item animated">Morbi leo risus</li> <li class="list-group-item animated">Porta ac consectetur ac</li> <li class="list-group-item animated">Vestibulum at eros</li> <li class="list-group-item animated">Morbi leo risus</li> <li class="list-group-item animated">Porta ac consectetur ac</li> <li class="list-group-item animated">Vestibulum at eros</li> </ul> 

Answer 2

https://css-tricks.com/snippets/javascript/javascript-keycodes/ \\

$('.yourinput').on('input',function(e){
        if(e.which == 8 ) {
          ///do whatever you want to do on the input
        }

你也可以在按键上使用