Mac中文输入法区分回车和提交

一、功能描述：

在搜索框中输入关键词，回车跳转至搜索结果页

二、项目背景记录：

vue3+vuetify的项目

三、问题描述：

中文输入法。

在Windows下输入拼音后，敲击空格 => 显示第一个联想词，敲击回车 => 拼音显示在搜索框中，再敲击回车 => 跳转搜索结果页。

在Mac浏览器中，敲击空格 => 显示第一个联想词，敲击回车 => 跳转到搜索结果页

很明显，Mac中不符合我们平时的输入习惯。

四、问题代码：

<VTextField
  ref="refSearchInput"
  v-model="searchQuery"
  autofocus
  variant="plain"
  class="app-bar-autocomplete-box"
  @keyup.esc="clearSearchAndCloseDialog"
  @keyup.enter.native="search(true)"
  @keydown="getFocusOnSearchList"
>
  ......
</VTextField>

五、解决思路：

1. 最开始想到的就是阻止默认事件，但是逻辑上行不通，而且实际操作后发现确实行不通

2. 网上简单查了下，event有个属性可以使用------isComposing，而且这个属性只有在keydown事件中会有所区别。

六、修改后的代码：

<!-- template -->
<VTextField
  ref="refSearchInput"
  v-model="searchQuery"
  autofocus
  variant="plain"
  class="app-bar-autocomplete-box"
  @keyup.esc="clearSearchAndCloseDialog"
  @keydown="getFocusOnSearchList($event,true)"
>
  ......
</VTextField>

// script
const getFocusOnSearchList = (e, hideHistory) => {
  ......
  // 判断是否是enter，以及处理mac中，中文输入法回车问题
  if(e.key === 'Enter' && !e.isComposing) {
    search(e, hideHistory)
  }
}

成功！