原生input实现清空按钮

最新推荐文章于 2024-02-05 10:42:51 发布

System.out.print

最新推荐文章于 2024-02-05 10:42:51 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_40841731/article/details/131329398

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<body  class="blue-bg">
    <div class="input-group" style="display:inline-block;position:relative;">
        <div style="position:absolute;right:2px;top:12px;cursor:pointer;display:none;" class="clear">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="background-color: white;border: none;">
                ×
            </button>
        </div>
        <input type="text" placeholder="请输入xxxx" id="idCard" name="keyword" >
    </div>
</body>
<script>
    $("#idCard").focus(function(){
        $(this).parent().children(".clear").show();
        console.log($(this).parent().children(".clear"))
    });
    $("#idCard").blur(function(){
        if($(this).val()==''){
            $(this).parent().children(".clear").hide();
        }
    });
    $(".clear").click(function(){
        $(this).parent().find('input').val('');
        $(this).hide();
    });

</script>

</html>