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');
                }
            })
复制代码

以下是效果图。input事件表示正在输入状态，focus事件表示得到焦点状态，blur表示失去焦点状态

 

http://api.jquery.com/bind/

http://www.runoob.com/jquery/event-on.html

Logo
智能机器人开发者大赛社区

「智能机器人开发者大赛」官方平台，致力于为开发者和参赛选手提供赛事技术指导、行业标准解读及团队实战案例解析;聚焦智能机器人开发全栈技术闭环，助力开发者攻克技术瓶颈，促进软硬件集成、场景应用及商业化落地的深度研讨。 加入智能机器人开发者社区iRobot Developer，与全球极客并肩突破技术边界，定义机器人开发的未来范式！

更多推荐

桌面整理赛题描述

《桌面整理赛题描述》PDF附件

avatar 智能机器人开发者大赛社区

寻物导航赛题描述

《寻物导航赛题描述》附件

avatar 智能机器人开发者大赛社区

叠衣服赛题描述

《叠衣服赛题描述》附件

avatar 智能机器人开发者大赛社区