实现输入框自带清除按钮

最近，项目中需要，在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时，右边显示“×”按钮；输入框为空时，“×”按钮消失。难点在于获取焦点的同时，获取输入内容。

注意：本例子的样式基于bootstrap.css和jquery，不再单独添加样式。

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

  
             

		
					×
		
	     
  
               
        

注：button外的div样式为input_clear样式。

2.jquery代码

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

 

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

                http://blog.csdn.net/dwc2011/article/details/51028944

版权声明：本文为博主原创文章，未经博主允许不得转载。