jquery十几行代码实现输入框自带清除按钮

在很多网站上的输入框会自带输入清除按钮，点一下就清除输入框的内容，非常方便。

网上找了很多代码，不是兼容性不好就是实现很麻烦，自己就花十几分钟，把这个功能实现了。

当输入框没有文字的时候不显示清除按钮，有文字的时候自动出现。

实现的效果如下：

第一步：将input框和清除按钮放在同一个div内，清除按钮可以使用图片。我这里使用的是iconfont图标，您也可以自己换成图片，具体位置可以自己调整一下位置。

<divstyle="display:inline-block;position:relative;">
<divstyle="position:absolute;right:2px;top:-2px;cursor:pointer;display:none;"class="input_clear"><iclass="Hui-iconfontf-26c_blue"></i></div>
<inputtype="text"placeholder="店名/手机号码"class="input-textw200"name="keyword"id="keyword"style="height:35px;">
</div>

$("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();
});