美文网首页
vue input弹出带搜索键盘和回车搜索

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

作者: YellowPoint | 来源:发表于2019-12-14 18:54 被阅读0次

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

相关文章

网友评论

      本文标题:vue input弹出带搜索键盘和回车搜索

      本文链接:https://www.haomeiwen.com/subject/xtkhnctx.html