vue input弹出带搜索键盘和回车搜索

input的type设为search,外面再套一层form,加上@submit.prevent防止提交,submit会在action之前执行,还要加上action="javascript:return true;"

只有action="javascript:return;会报错Uncaught SyntaxError: Illegal return statement(非法返回语句);
只有@submit.prevent;问题是ios在输入中文,键入字母按了空格后,搜索就变成确认了,无法触发搜索事件;

<form
  action="javascript:return true;"
  @submit.prevent
>
  <input
    ref="searchInput"
    v-model="keyword"
    type="search"
    placeholder="请输入关键字"
    @keyup.13="search()"
  >
</form>

监听搜索事件用@keyup.13
后发现问题:ios点了搜索之后,键盘不自动收回
故加上ref手动blur

methods: {
    async search(categoryId) {
      this.$refs.searchInput.blur();  
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容