js_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题

中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题

• 今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想当然地使用了input事件用于触发输入事件, 但是被测试出bug: 当输入法是中文时, 在使用汉语时的初始选字阶段会不停地触发input事件, 但是v-model绑定的值却一直是维持在空字符串, 也就是说, 用户在使用中文选字阶段会一直执行无搜索值的搜索逻辑

• 解决问题在于: 在input绑定值为空字符串的情况下, input事件的触发有以下三种情况:

  • 1. 英文输入, 此时的v-model绑定值从空字符串到字符串, e.data的输入值存在
    2. 中文选词输入, 此时的v-model绑定值为空字符串, e.data存在值;
    3. 删除: e.data值为null, v-model绑定值为空字符串

  • 判定如下:

    • 1. 当且仅当input事件对象的data属性为null, 且绑定值为空字符串的情况下, 才代表通过删除清空了输入框的值, 只有在这种情况下才会调用搜索.

    • // 只用于处理当字符串为空的时候
      const handleSearchValue = async function (event) {
        if (event.data === null && search_companyName.value === '') {
          curPage.value = 1
          await getCompanyList({ search_name: search_companyName.value })
        }
      }
      

    • <input
        type="text"
        class="search_input"
        placeholder="按企业名搜索"
        @keydown.enter.native.stop="searchCompanyByName"
        v-model="search_companyName"
        @input="handleSearchValue($event)"
      />