IE浏览器文本输入框清除图标点击事件实现关联输入框内容清空

IE 输入框自带的X形清除图标点击时不会触发独立的专属事件，但是会修改输入框的value属性，同时触发input事件（IE9及以上版本）或propertychange事件（IE8及更低版本），我们可以通过监听这两个事件实现同步清空效果。

1. 基础HTML结构示例 #

<!-- 待转换金额输入框 -->
<input type="text" id="sourceInput" placeholder="输入待转换金额">
<!-- 转换结果输入框，建议设为只读避免用户误修改 -->
<input type="text" id="resultInput" placeholder="转换结果" readonly>

2. 兼容全版本IE的JS实现 #

const sourceInput = document.getElementById('sourceInput');
const resultInput = document.getElementById('resultInput');

// 兼容IE的通用事件绑定工具函数
function bindEvent(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + eventName, handler);
  }
}

// 输入值变化处理逻辑
function handleSourceUpdate() {
  // 源输入框为空时同步清空结果框
  if (sourceInput.value.trim() === '') {
    resultInput.value = '';
  }
  // 非空场景可在这里插入你的货币转换逻辑
}

// 监听IE9+的input事件，覆盖清除图标点击的变化场景
bindEvent(sourceInput, 'input', handleSourceUpdate);
// 兼容IE8及更低版本，监听属性变化事件
bindEvent(sourceInput, 'propertychange', function(e) {
  // 仅在value属性变化时触发逻辑，避免其他属性变更导致的误触发
  if (e.propertyName === 'value') {
    handleSourceUpdate();
  }
});

3. 注意事项 #

• 如果不需要兼容IE8及更低版本，可直接删除propertychange事件的监听代码，仅保留input事件监听即可
• 不要仅依赖keyup/keydown/click等事件实现该逻辑，这类事件无法捕获IE自带清除图标的点击操作
• 源输入框的其他清空逻辑可以直接复用handleSourceUpdate函数，不需要重复写清空结果框的代码

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