0
点赞
收藏
分享

微信扫一扫

爱普生晶振发布RTC模块晶振(压电侠)

跟着Damon写代码 03-18 06:00 阅读 3
macos

一、功能描述:

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

二、项目背景记录:

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)
  }
}

 成功!

举报

相关推荐

0 条评论