逃避与其他JQuery清除搜索

时间:2014-07-28 20:25:48

标签: javascript jquery keypress

我使用以下代码在清除文本的搜索栏中插入X.我还插入一个片段在Return上提交。我现在想添加一个片段来清除搜索&在Esc上提交。 (= = 27)。有任何想法吗?

JSFiddle

<input type="text" id="fac" name="fac" class="form-control ui-autocomplete-input clearable" placeholder="Search">
<script>
jQuery(function($) {

  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('');
fnexec(3);
  });

});

$('#fac').keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        fnexec(3);
    }
});
</script>

这是CSS,以防任何人想要自己使用X部分 - 它非常漂亮!

.clearable{
  background:url(http://i.imgur.com/z7ZSYjt.png) no-repeat right -10px center;
  padding:3px 18px 3px 4px; 
  border-radius:3px;
  transition: background 0.4s;
}
.clearable.x{
  background-position: right 5px center;
}
.clearable.onX{
  cursor:pointer;
}

0 个答案:

没有答案