中文输入法事件处理指南 ⌨️

背景问题 🤔

在开发带有搜索过滤功能的输入框时，经常会遇到一个困扰：当用户使用中文输入法时，每输入一个拼音字母就会触发过滤，导致用户体验很差。这是因为 input 事件无法识别中文输入法的状态。

IME 输入事件介绍 📝

浏览器提供了三个特殊的事件来处理输入法输入：

• compositionstart: 开始输入法输入时触发
• compositionupdate: 输入法输入过程中触发
• compositionend: 输入法输入结束时触发

实现示例 💡

以下是一个优化后的完整示例：

<template>
  <div id="app">
    <input
      type="text"
      :value="filterText"
      @input="onInput"
      @compositionstart="onCompositionStart"
      @compositionend="onCompositionEnd"
    />
    <ul>
      <li v-for="item in filteredList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      filterText: "",
      list: [
        "The Wealth of Nations",
        "战争与和平",
        "海底两万里",
        "三国演义",
        "嫌疑人X的献身"
      ],
      isComposing: false // 使用更语义化的变量名
    };
  },
  computed: {
    filteredList() {
      if (!this.filterText) {
        return this.list;
      }
      return this.list.filter(item => 
        item.toLowerCase().includes(this.filterText.toLowerCase())
      );
    }
  },
  methods: {
    onInput(e) {
      if (!this.isComposing) {
        this.filterText = e.target.value;
      }
    },
    onCompositionStart() {
      this.isComposing = true;
    },
    onCompositionEnd(e) {
      this.isComposing = false;
      this.filterText = e.target.value; // 直接使用输入框的最终值
    }
  }
};
</script>

优化要点 ✨

1. 变量命名优化：

   • 将 lock 改为更语义化的 isComposing
   • 使代码更易理解和维护

2. 搜索逻辑优化：

   • 使用 includes 替代 indexOf
   • 添加大小写不敏感的搜索

3. 输入处理优化：

   • 移除了不必要的 setTimeout
   • 直接使用 e.target.value 获取最终输入值
   • 避免使用字符串拼接，防止输入异常

注意事项 ⚠️

1. 中文输入过程中的事件顺序：

   • compositionstart
   • input (多次)
   • compositionend
   • input (最后一次)

2. 浏览器兼容性：

   • 主流浏览器都支持这些事件
   • IE 可能需要特殊处理

3. 性能优化：

   • 可以考虑添加防抖（debounce）处理
   • 大数据列表建议使用虚拟滚动

扩展应用 🚀

这种处理方式不仅适用于中文，还适用于：

• 日文输入
• 韩文输入
• 其他需要组合键的输入法

相关资源 📚

• MDN - CompositionEvent
• W3C - Input Events Level 2

希望这篇文章能帮助你更好地处理输入法相关的问题！如果有任何疑问，欢迎讨论。 🤝