Устраняемые входной код не работает, как ожидалось

Question

Я использую код, который я нашел здесь ... Clearable input

Который работает, как ожидалось, но когда я использую его в моей странице все работает для cirsor меняющегося при нависают над исключением 'Икс'. Единственный раз, когда он работает, - это если поле ввода отключено.

Другая вещь, которую я заметил, что код не будет работать, если я не добавить следующее мой CSS файл не уверен, если это связано или нет ...

.ui-autocomplete{} 

Я думаю, что это, возможно, придется делать с доведением изображение спереди, но все, что я пробовал, не работает.

EDIT: Добавлены скриншоты, чтобы показать проблему ...

Курсор меняется, когда вход отключен ...

Курсор не меняется при включении ...

В основном пытаются чтобы курсор изменился на ручку, когда вход включен.

Обновленный код этого вопроса ... все еще есть проблемы, но вы хотите обновить новый код.

$(function($){ 
    function tog(v){return v?'addClass':'removeClass';} 
    $(document).on('mouseenter', '.clearable', function(){ 
     if ($(this).prop('disabled')===false) { 
      $(this)[tog(this.value)]('x'); 
     } 
    }).on('mousemove', '.x', function(e){ 
     $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX'); 
    }).on('mouseleave', '.x', function(){ 
     $(this).removeClass('x');//.val('').change(); 
    }).on('click', '.onX', function(ev){ 
     ev.preventDefault(); 
     $(this).removeClass('x onX').val('').change(); 
     $(this).trigger('keyup'); 
    }); 
}); 

Answer 1

Рабочий код сделано в JQuery виджет ...

(function($, undefined) {  
    $.widget("jomojo.clearmojo", { 
     version: "1.0", 

     _create: function(){ 
      $('input[type=text]').addClass('clearable'); 

      this.element 
       .on('mouseenter', function(){ 
        if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false){ 
         $(this).toggleClass('x'); 
        }; 
       }) 
       .on('mousemove', function(event){ 
        if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false){ 
         $(this).toggleClass('onX', this.offsetWidth-18 < event.clientX-this.getBoundingClientRect().left); 
        }; 
       }) 
       .on('mouseleave', function(){ 
        $(this).removeClass('x'); 
       }) 
       .on('click', function(event){ 
        var elementOffsetWidth=this.offsetWidth 
        var parentOffset=$(this).parent().offset(); 
        var relativeX=event.pageX-parentOffset.left; 
        var xOffset=elementOffsetWidth-16 

        if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false && relativeX>xOffset){ 
         event.preventDefault(); 
         $(this).removeClass('x onX').val('').change(); 
         $(this).trigger('keyup'); 
        }; 
       });   
      },   
     }); 
}(jQuery)); 

CSS

input[type=text]::-ms-clear{ 
    display: none; 
} 

.clearable{ 
    background: #fff url('../images/delete.jpg') no-repeat right -10px center; 
    background-size: 10px 8px; 
    padding: 0px 0px 0px 0px; 
    transition: background 0.4s; 
} 

.clearable.x{ 
    background-position: right 3px center; 
} 

.clearable.onX{ 
    cursor: pointer; 
} 

Пример использования:

$("input[type=text]").clearmojo()