Clearable input code not working as expected

Question

I'm using the code I found here...Clearable input

Which works as expected but when I use it in my page everything works except for the cirsor changing when hovering over the 'x'. The only time it works is if the input box is disabled.

Another thing I noticed is that the code will not work unless I add the following to my css file not sure if it's related or not...

.ui-autocomplete{}

I think it might have to do with bringing the image to the front but everything I've tried doesn't work.

EDIT: Added screenshots to show problem...

Cursor changes when input is disabled...

Cursor doesn't change when enabled...

Basically trying to get the cursor to change to the hand when input is enabled.

Updated code to this... still have issues but wanted to update with new code.

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

to remove cursor when you hover on `x`, just remove `.clearable.onX { cursor: pointer;}` — AleshaOleg, Aug 11 '15 at 23:33
@AleshaOleg, yes that part I know... problem is that part doesn't work when the inputbox is enabled but when it's disabled it works. — JoMojo, Aug 12 '15 at 00:25
@Oriol sorry didn't have time till yesterday to look back into this issue. But seems like the issue is related to the IE version, as per this [SO link](http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs/14739092#14739092) the 'clear field' X button seems to have only appeared in IE10 and one this machine I have IE9 which explains the issue I'm having. — JoMojo, Sep 30 '15 at 18:56

JoMojo · Accepted Answer · 2015-11-13T02:18:30.330

Working code made into a jquery widget...

(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;
}

Example use:

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

Clearable input code not working as expected

1 Answers1