Question

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

要生成此：

1-在文本框中的i上输入（列表将被过滤）
2-将另一个i添加到文本框，例如ii
3-用i删除最后一个Backspace，甚至选择并删除。虽然有些项目包含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
        }

您也可以在按键上使用

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

2 个答案: