原生input实现清空按钮

最新推荐文章于 2024-07-31 17:17:36 发布

System.out.print

最新推荐文章于 2024-07-31 17:17:36 发布

阅读量2.5k

点赞数

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

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

版权

前端专栏收录该内容

9 篇文章

订阅专栏

这段代码创建了一个HTML输入框，当输入框获得焦点时，会显示一个清除按钮。用户点击清除按钮可以清空输入框的内容并隐藏该按钮。失去焦点且输入为空时，清除按钮也会自动隐藏。

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

<!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>