IE中鼠标移动显示图标及搜索框图标切换技术咨询

先把你的HTML结构整理出来，方便后续逻辑落地：

<span id="search-icon" class="search-icon"></span> 
<input type="text" id="txtABFSearch" class="form-control mt17 right search-header form-control-header" maxlength="500" autocomplete="off" placeholder="Search Franchisee" /> 
<div id="dvSearchResults" style="display: none;"></div>

一、补全图标切换的JS逻辑 #

你提到输入时要切换图标，这里给你完善完整的交互逻辑，覆盖输入内容、清空内容、点击叉号清空三种场景：

// 获取核心元素
const searchIcon = document.getElementById('search-icon');
const searchInput = document.getElementById('txtABFSearch');
const searchResults = document.getElementById('dvSearchResults');

// 输入内容时的图标切换逻辑
searchInput.addEventListener('input', function() {
  if (this.value.trim() !== '') {
    // 移除搜索图标类，添加叉号类（假设叉号样式类名为close-icon）
    searchIcon.classList.remove('search-icon');
    searchIcon.classList.add('close-icon');
    // 同步显示搜索结果容器
    searchResults.style.display = 'block';
  } else {
    // 清空输入时换回搜索图标，隐藏结果容器
    searchIcon.classList.remove('close-icon');
    searchIcon.classList.add('search-icon');
    searchResults.style.display = 'none';
  }
});

// 点击叉号图标时清空输入并恢复初始状态
searchIcon.addEventListener('click', function() {
  if (this.classList.contains('close-icon')) {
    searchInput.value = '';
    // 手动触发input事件，同步所有状态
    searchInput.dispatchEvent(new Event('input'));
    // 可选：清空后自动聚焦输入框
    searchInput.focus();
  }
});

提示：记得提前定义好.close-icon的CSS样式，和.search-icon的布局属性保持一致，只替换图标内容即可

二、解决Internet Explorer中鼠标移动后图标显示异常的问题 #

IE（尤其是IE11及更早版本）在DOM操作、事件绑定和渲染上有不少兼容性坑，针对鼠标移动后图标显示异常的问题，给你几个实用的排查和解决方向：

1. 事件绑定兼容处理
   IE不支持标准的addEventListener，需要兼容attachEvent，可以封装一个通用的事件绑定函数：

function bindEvent(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler);
  } else if (element.attachEvent) {
    // IE专属事件绑定方式，事件名要加on前缀
    element.attachEvent('on' + eventName, handler);
  } else {
    element['on' + eventName] = handler;
  }
}

// 使用示例
bindEvent(searchInput, 'input', function() { /* 你的输入逻辑 */ });
bindEvent(searchIcon, 'click', function() { /* 你的点击逻辑 */ });

2. 类名操作兼容处理
   IE11之前的版本不支持classListAPI，需要用className手动处理类名：

// 移除指定类名
function removeClass(el, className) {
  el.className = el.className.replace(new RegExp('(^|\\s)' + className + '(\\s|$)', 'g'), '$1$2').trim();
}

// 添加指定类名（避免重复添加）
function addClass(el, className) {
  if (!new RegExp('(^|\\s)' + className + '(\\s|$)').test(el.className)) {
    el.className += (el.className ? ' ' : '') + className;
  }
}

// 使用示例
removeClass(searchIcon, 'search-icon');
addClass(searchIcon, 'close-icon');

3. 鼠标移动相关的渲染问题修复
   如果是鼠标移动后图标显示异常，大概率是IE的渲染延迟或者hover样式兼容问题：

• 检查图标CSS的hover状态，避免使用IE不支持的CSS属性（比如background-size: cover在老IE中可能失效，改用具体像素值）
• 若鼠标移动后图标状态未同步，可在searchInput的mouseover事件中强制校验并同步图标状态
• 老IE经常出现DOM更新后不立即渲染的情况，切换类名后可以强制触发重绘：

// 切换类名后执行这段代码
searchIcon.style.display = 'none';
searchIcon.offsetHeight; // 触发浏览器重绘
searchIcon.style.display = 'inline-block'; // 还原原来的display属性

内容的提问来源于stack exchange，提问作者Nabeel