jQuery(function($) {

  // /////

  // CLEARABLE INPUT

  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('touchstart click', '.onX', function( ev ){

    ev.preventDefault();

    $(this).removeClass('x onX').val('').change();

  });

});