Vue.js移动端浏览器@keyup.enter事件失效，无法触发startSearching函数

实用修复方案 #

• 替换为@keydown.enter事件
  部分移动端浏览器对keyup事件的支持不如keydown稳定，换事件类型试试：

  <input
    type="text"
    placeholder="Search"
    @keydown.enter="startSearching"
    v-model="searchInput"
    class="search-box-input"
    :disabled="!isActive"
  />
  

• 用表单包裹并监听@submit事件
  移动端软键盘的“搜索/确认”键通常会触发表单提交，把输入框放进form标签：

  <form @submit.prevent="startSearching">
    <input
      type="text"
      placeholder="Search"
      v-model="searchInput"
      class="search-box-input"
      :disabled="!isActive"
    />
  </form>
  

  其中.prevent用来阻止表单默认的页面跳转行为，确保只触发startSearching方法。

• 手动监听键盘事件判断按键
  如果前两种方法无效，可直接监听keyup并判断回车键编码：

  <input
    type="text"
    placeholder="Search"
    @keyup="handleKeyUp"
    v-model="searchInput"
    class="search-box-input"
    :disabled="!isActive"
  />
  

  对应Vue方法：

  handleKeyUp(e) {
    if (e.keyCode === 13 || e.which === 13) {
      this.startSearching()
    }
  }
  

• 设置input类型为search
  把type从text改成search，移动端软键盘会自动显示“搜索”按钮，提升事件触发概率：

  <input
    type="search"
    placeholder="Search"
    @keyup.enter="startSearching"
    v-model="searchInput"
    class="search-box-input"
    :disabled="!isActive"
  />
  

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