美文网首页
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