实现输入框自带清除按钮

chenqqabcdchenqqabcd

于 2024-08-21 17:53:32 发布

阅读量116

点赞数

文章标签： js css3

原文链接：https://blog.csdn.net/chelen_jak/article/details/84633666

版权

最近，项目中需要，在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时，右边显示“×”按钮；输入框为空时，“×”按钮消失。难点在于获取焦点的同时，获取输入内容。注意：本例子的样式基于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，分别为输入框效果图和点击输入框效果后：