input实时监听文本框内容

最新推荐文章于 2023-07-20 09:16:10 发布

原创最新推荐文章于 2023-07-20 09:16:10 发布 · 827 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #监听

事件监听专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用jQuery监听文本框输入事件，对比了'keydown'与'input'事件的区别，并通过防抖(debounce)技术优化输入监听，实现高效本地搜索。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做搜索时经常会用到我们需要监听input

<input type="text" id="input">

$('#input').on('keydown',function(){
    var val=$(this).val().trim();
    console.log(val) // 此时按下dd 打印 d
})
 //因为keydown事件处理函数中立即获取文本框中的内容，通常会有一个字符的偏差
    他是在键盘按下瞬间触发

所以基本不用这个方法，html5新增属性input 非常nice


    $('#input').on('input',function(){
        var val=$(this).val().trim();
        
       console.log(val) //这个方法，当我们键盘按下什么就会打印出什么
      
    })
// 这样也就完成了我们想要的效果做到实时监听

但是我们为了考虑性能，还是要对他做一些优化的，我们本地搜索时，让内容延迟显示，这个时候就要做延迟处理了

var debounce=(function(){
    var timer=null;
    return function(callback){
    clearTimeout(timer)
timer=setTimeout(function(){
    callback();
},200)
}
})()

$('#input').on('input',function(){
    var val=$(this).val().trim();
    debounce(function(){
    console.log(val) // 延迟200毫秒 打印
})
})

OK到这里就完整的做好，本地搜索啦！