实现输入框自带清除按钮

最新推荐文章于 2023-07-13 14:56:44 发布

chelen_jak

最新推荐文章于 2023-07-13 14:56:44 发布

阅读量2.2k

点赞数

分类专栏： CSS 实用

实用同时被 2 个专栏收录

738 篇文章 4 订阅

订阅专栏

CSS

191 篇文章 0 订阅

订阅专栏

原文出处：https://blog.csdn.net/qq_26780317/article/details/79002409

最近，项目中需要，在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时，右边显示“×”按钮；输入框为空时，“×”按钮消失。难点在于获取焦点的同时，获取输入内容。注意：本例子的样式基于bootstrap.css和jquery，不再单独添加样式。

1.html部分

将button和input框放入同一个div中，清除按钮可以使用图片或fonts图标，我使用的是bootstrap中button样式，具体位置可自行微调；

<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">
      ×
      </button>
   </div>  
   <input type="text" placeholder="请输入" 
      class="input-text w200 form-control" 
      aria-describedby="basic-addon1" name="keyword" id="keyword" style="height:35px;" >  
</div>

注：button外的div样式为input_clear样

2.jquery代码

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

3.图1和图2，分别为输入框效果图和点击输入框效果后：

参考博客：
http://blog.csdn.net/pinzhizun/article/details/54144253
http://blog.csdn.net/dwc2011/article/details/51028944