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