<input type="text" id="servicer-search" class="form-control" autocomplete="off" />
上面是刚开始的input
<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框后面
// 初始化检查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 移上去的时候就会一直闪 所以又做了第二次改进
// 初始化检查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();}
}
 安装记录)
)
)
