给input[text]添加icon，并且绑定事件

如上图实现右侧带clear icon的文本框。

一、比较常见的方法是：在文本框右侧添加 a标签，通过样式控制来实现点击clear icon清除文本框内容。

<input type="text" id="" class='' value="" style="width:100px"/><a href="javascript:void(0);"><img id="" src="xxxx.png" class=''></a>

二、 clearable

html:

<input class="clearable" type="text" name="" value="" placeholder="" />  

css:

.clearable{    background: #fff url(icoX.gif) no-repeat right -10px center;    border: 1px solid #999;    padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */    border-radius: 3px;    transition: background 0.4s;  }  .clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */  .clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */  

JS:

function tog(v){return v?'addClass':'removeClass';}   $(document).on('input', '.clearable', function() {      $(this)[tog(this.value)]('x');  }).on('mousemove', '.x', function(e) {      $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');     }).on('click', '.onX', function(){      $(this).removeClass('x onX').val('').change();  });  

　　给文本框内部的右侧添加了一个18px的背景图片（clear icon），然后控制鼠标事件，进入这个18px的区域的时候触发clear，清空文本框。