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

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

vuevuetifysearchkeyup.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')
}

设置好以后,效果如下

image.png


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

image.png

目录
相关文章
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
6天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
10 0
|
4月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
65 3
|
4月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
4月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
144 0
|
4月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
125 0
Vue3+Vite+TypeScript常用项目模块详解
|
4月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
|
4月前
|
前端开发 JavaScript Java
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
167 1