原生input添加删除图标类似vue里面移入显示删除[jquery]

css 复制代码

 <input type="text" id="servicer-search" class="form-control" autocomplete="off" />

上面是刚开始的input

css 复制代码

<div class="servicer-search-box">
	<input type="text" id="servicer-search" class="form-control" autocomplete="off" />
	<i class="font-v2 icon-shurukuangneishanchu icons"></i> //删除图标
</div>
使用css吧icon定位到input框后面

css 复制代码

// 初始化检查input值并设置图标显示状态
    function initDeleteIcon() {
        var servicerInput = $('input[name="servicerUserId"]');
        var deleteIcon = $('.icons');
        if (servicerInput.val() && servicerInput.val().trim() !== '') {
            // 如果有值，设置鼠标移入移出事件
            setupIconHover();
        } else {
            // 如果没有值，移除事件监听
            deleteIcon.hide();
            $('#servicer-search').off('mouseenter mouseleave');
        }
    }
    
    // 设置图标悬停事件
    function setupIconHover() {
        var deleteIcon = $('.icons');
        var searchInput = $('#servicer-search');
        searchInput.on('mouseenter', function() {
            if ($('input[name="servicerUserId"]').val() && 			$('input[name="servicerUserId"]').val().trim() !== '') {
                deleteIcon.show();
            }
        }).on('mouseleave', function() {
            deleteIcon.hide();
        });
        
        // 点击删除图标清空值
        deleteIcon.on('click', function() {
       		//清空input
        });
    }
function updateDeleteIconVisibility() {
    var servicerInput = $('input[name="servicerUserId"]');
    var deleteIcon = $('.icons');
    
    if (servicerInput.val() && servicerInput.val().trim() !== '') {
        setupIconHover(); // 确保事件已绑定
    } else {
        deleteIcon.hide();
    }
}
initDeleteIcon();
updateDeleteIconVisibility()

已上是我最初时候的想法但是做完之后发现使用mouseenter mouseleave 移上去的时候就会一直闪所以又做了第二次改进

css 复制代码

// 初始化检查input值并设置图标显示状态
function initDeleteIcon() {
    var servicerInput = $('input[name="servicerUserId"]');
    var deleteIcon = $('.icons');

    if (servicerInput.val() && servicerInput.val()!='0/0' && servicerInput.val().trim() !== '') {
        // 如果有值，设置鼠标移入移出事件
        setupIconHover();
    } else {
        // 如果没有值，移除事件监听
        deleteIcon.hide();
        $('#servicer-search').off('mouseenter mouseleave');
        deleteIcon.off('mouseenter mouseleave');
    }
}

// 设置图标悬停事件
function setupIconHover() {
    var deleteIcon = $('.icons');
    var searchInput = $('#servicer-search');
    var hoverTimer = null;

    // 使用mouseenter和mouseleave处理整个区域的悬停
    searchInput.off('mouseenter mouseleave').on('mouseenter', function() {
        if ($('input[name="servicerUserId"]').val() && $('input[name="servicerUserId"]').val().trim() !== '' && $('input[name="servicerUserId"]').val()!='0/0') {
            // 清除之前的隐藏定时器
            if (hoverTimer) {
                clearTimeout(hoverTimer);
                hoverTimer = null;
            }
            deleteIcon.show();
        }
    }).on('mouseleave', function(e) {
        // 设置延迟隐藏，避免闪烁
        hoverTimer = setTimeout(function() {
            deleteIcon.hide();
        }, 100);
    });

    // 为删除图标添加事件处理，防止在图标上时隐藏
    deleteIcon.off('mouseenter mouseleave').on('mouseenter', function() {
        // 鼠标移到图标上时，清除隐藏定时器
        if (hoverTimer) {
            clearTimeout(hoverTimer);
            hoverTimer = null;
        }
    }).on('mouseleave', function() {
        // 鼠标离开图标时隐藏
        deleteIcon.hide();
    });

    // 点击删除图标清空值
    deleteIcon.off('click').on('click', function() {
	    //清空值
}

function updateDeleteIconVisibility() {
    var servicerInput = $('input[name="servicerUserId"]');
    var deleteIcon = $('.icons');

    if (servicerInput.val() && servicerInput.val().trim() !== '') {
        setupIconHover(); // 确保事件已绑定
    } else {
        deleteIcon.hide();
    }
}