实现输入框自带清除按钮

ゞ浴缸里的玫瑰 2022-04-13 12:57 474阅读 0赞

原文出处：[https://blog.csdn.net/qq\_26780317/article/details/79002409][https_blog.csdn.net_qq_26780317_article_details_79002409]

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

### 1.html部分 ###

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

注：button外的div样式为input\_clear样

### 2.jquery代码 ###

3.图1和图2，分别为输入框效果图和点击输入框效果后：  
![SouthEast][]  
![SouthEast 1][]  
  
参考博客：  
[http://blog.csdn.net/pinzhizun/article/details/54144253][http_blog.csdn.net_pinzhizun_article_details_54144253]                
[http://blog.csdn.net/dwc2011/article/details/51028944][http_blog.csdn.net_dwc2011_article_details_51028944]

[https_blog.csdn.net_qq_26780317_article_details_79002409]: https://blog.csdn.net/qq_26780317/article/details/79002409
[SouthEast]: /images/20220413/c5232b9eb6144b2e8468bc09f2a26cd0.png
[SouthEast 1]: /images/20220413/5b8478d8cfd14dbe8f4958d1bf8dea70.png
[http_blog.csdn.net_pinzhizun_article_details_54144253]: http://blog.csdn.net/pinzhizun/article/details/54144253
[http_blog.csdn.net_dwc2011_article_details_51028944]: http://blog.csdn.net/dwc2011/article/details/51028944