现在App搜索、用户名密码输入框都会有这样一个功能，输入数据后，后面会有一个可供删除的交互设计。如下图：
先看看需求是什么？
1.没有数据时，点击后，删除按钮不出现；点击后输入\修改数据，删除按钮出现
2.点击删除按钮清空数据后，删除按钮消失
3.手动删除数据至为空时，删除按钮从出现到消失
4.不再输入数据时（失去焦点），删除按钮消失
1）先考虑用jquery来实现
分析上面的需求，涉及到focus、click、input propertychange监听事件，假设我们现在要实现一个登录功能，有用户名和密码的输入框，如下：
<div class="input_boxs">
<input type="text" class="username" id="username" placeholder="请输入用户名">
<img class="deleteImg" id="deleteImg" src="delete.png">
</div>
上面div分别就是用户名的输入框（密码输入效果类似，不再重复；样式代码省略）
1.首先实现没有数据时，点击后，删除按钮不出现；点击后输入\修改数据，删除按钮出现
使用focus事件：
2.点击删除按钮清空数据后，删除按钮消失
对删除按钮使用click事件：
3.手动删除数据至为空时，删除按钮从出现到消失
对输入框进行input propertychange事件监听：
4.不再输入数据时（失去焦点），删除按钮消失
注:这个时候不能使用blur事件，否则在点击删除按钮之前就会触发这个方法，导致按钮隐藏无法触发click清空内容。
2）还有一种方法，是使用css+js共同来控制的
CSS代码：
.input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
.clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(clear.png) no-repeat; outline: none; }
.input:valid + .clear { display: inline; }
HTML代码：
输入任意内容：<input class="input" required><a href="javascript:" class="clear"></a>
在输入数据的时候自动会出现删除按钮的图片，然后再给a标签加入click的监听事件就能清除数据了。
该方法来自 https://www.zhangxinxu.com/wordpress/2014/03/css-input-clear-button-show-hide/，学习学习！
