jquery 输入框失去焦点时 (blur)事件

最新推荐文章于 2025-06-26 10:10:45 发布

梓沂

最新推荐文章于 2025-06-26 10:10:45 发布

阅读量3.5w

点赞数 7

文章标签： blur jquery.on

本文介绍如何使用jQuery通过input、focus及blur事件实现输入框右侧显示取消按钮的功能。当输入框内容变化时，根据输入框是否有内容动态显示或隐藏取消按钮。

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

jquery判断input输入框的值，用到input事件，blur事件，focus事件

需求：当输入框有字或者正在输入时，右边的圆形取消按钮才出现。否则不出现。

            //输入框正在输入时
            $("#ipt").on('input',function(){
                if(!($('#ipt').val()=='')){
                    $(".cancle_ico").removeClass('hide');
                }else{
                    $(".cancle_ico").addClass('hide');
                }
            })
            //输入框得到焦点时
            $("#ipt").on('focus',function(){
                 if(!($('#ipt').val()=='')){
                    $(".cancle_ico").removeClass('hide');
                }else{
                    $(".cancle_ico").addClass('hide');
                }
            })
            //输入框失去焦点时
            $("#ipt").on('blur',function(){
                 if(($('#ipt').val()=='')){
                    $(".cancle_ico").addClass('hide');
                }else{
                    $(".cancle_ico").removeClass('hide');
                }
            })