代码之家 › 专栏 › 技术社区 › Mona Coder

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

jquery javascript

Mona Coder · 技术社区 · 7 年前

如何检测文本输入上的任何退格变化?我两者都试过了 .change() 和 .keyup() 但这些都不起作用。

制作这个

1-进入 i 在文本框中(列表将被过滤)
我 到文本框,如 ii
我 Backspace 甚至可以选择并删除。而有些项目包含 我

$("#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>

2 回复 | 直到 7 年前

imvain2 7 年前

问题不在于退格,而在于你自己 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>

-1

imposterSyndrome 7 年前

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
        }

你也可以在按键上使用

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前