美文网首页
Vue 项目触发移动软键盘搜索点击事件

Vue 项目触发移动软键盘搜索点击事件

作者: 草帽lufei | 来源:发表于2019-12-17 17:48 被阅读0次

vue vuetify search keyup.enter

template 中如下写法, 效果

<template>
  <div class="main text-align-center height-100vh" v-on:keyup.enter="search()">
    <v-app-bar color="#fafafa" fixed :elevation="0">
      <v-btn icon @click="back()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconfanhui" />
        </svg>
      </v-btn>
      <v-text-field
        append-icon="mdi-magnify"
        placeholder="Search"
        single-line
        outlined
        clearable
        dense
        class="search-position"
        type="search"
        v-model="inputText"
      ></v-text-field>
    </v-app-bar>
  </div>
</template>

js methods 中设置 keyup.enter 事件触发的 search 函数

search () {
  console.log('search')
}

设置好以后,效果如下

注意 type="search" , 如果不设置, 安卓手机 Chrome 浏览器中打开的软键盘是 前往

相关文章

网友评论

      本文标题:Vue 项目触发移动软键盘搜索点击事件

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