实现input输入框自带清除按钮

<div style="display:inline-block;position:relative;">  
  <div style="position:absolute;right:2px;top:-2px;cursor:pointer;display:none;" class="input_clear">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
   </div>  
   <input type="text" placeholder="请输入" class="input-text w200 form-control" aria-describedby="basic-addon1" name="keyword" id="keyword" style="height:35px;" >  
</div>

 

<script>
        $("input").focus(function(){  
    $(this).parent().children(".input_clear").show();  
});  
$("input").blur(function(){  
    if($(this).val()=='')  
    {  
        $(this).parent().children(".input_clear").hide();  
    }  
});  
$(".input_clear").click(function(){  
    $(this).parent().find('input').val('');  
    $(this).hide();  
}); 
        </script>

 

posted @ 2021-01-15 13:11  忧伤还是快乐EL  阅读(3248)  评论(0编辑  收藏  举报