Question

我正在使用我在此处找到的代码... Clearable input

哪个按预期工作，但当我在我的页面中使用它时，一切都有效，除了在悬停在＆＃39; x上时cirsor的变化。它唯一有效的时间是禁用输入框。

我注意到的另一件事是代码不起作用，除非我将以下内容添加到我的css文件中，不确定它是否相关......

.ui-autocomplete{}

我认为这可能与将图像放在前面有关，但我尝试过的所有内容都无法正常工作。

编辑：添加了截屏以显示问题...

禁用输入时光标会发生变化...

启用时光标不会更改...

当启用输入时，基本上尝试让光标变为手。

为此更新了代码......仍然存在问题，但希望使用新代码进行更新。

$(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()

可清除的输入代码无法按预期工作

1 个答案: