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

2019-12-17  本文已影响0人  草帽lufei

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 浏览器中打开的软键盘是 前往

上一篇 下一篇

猜你喜欢

热点阅读