vue 实现移动端键盘搜索事件监听

1、首先注意，input的type="serch"

<input @keypress="searchGoods" type="serch" placeholder="搜索商品">

2、监听keypress事件

（1）KeyDown、KeyUp 事件

这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI 字符，应使用 KeyPress 事件。）

（2）KeyPress 事件

此事件当用户按下和松开一个 ANSI 键时发生。

3、阻止事件默认行为

methods中添加 searchGoods方法，

判断keyCode ==13

阻止默认事件（默认是换行）

通过event.target.value获取要搜索的值，调用搜索接口。

 searchGoods(event) {
   if (event.keyCode == 13) { //如果按的是enter键 13是enter
     event.preventDefault(); //禁止默认事件（默认是换行）
     console.log(event.target.value)
     Toast("点击了确认")
   }
   }

4、大家在项目中会发现，ios上系统软键盘，keycode=13的叫换行，对于客户体验而言，非常不好，能不能修改软键盘的文案呢，答案是肯定的，解决办法移步另一篇文章。

https://www.jb51.net/article/173684.htm（微信内置开发 iOS修改键盘“换行”为“搜索”）

以上这篇vue 实现移动端键盘搜索事件监听就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue实现简单键盘的示例(支持移动端和pc端)

    使用vue实现简单键盘的示例(支持移动端和pc端)

    常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v

  • vue 实现边输入边搜索功能的实例讲解

    效果图: 搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求,否则不请求 search.vue <template> <div id="search"> <input type="text" class="search" plac

  • vue监听键盘事件的快捷方法【推荐】

    在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: <input v-on:keyup.13="submit"> 对于一些常用键,还提供了按键别名: <input @keyup.enter="submit"> <!-- 缩写形式 --> 全部的按键别名: .enter  .tab  .delete (捕获"删除"和"退格"键)  .esc  .s

  • 微信内置开发 iOS修改键盘换行为搜索的解决方案

    在微信中搜索的时候, 我们通常使用keycode=13来判断客户是否点击了确定. 在安卓上,唤醒搜索框为确认键没问题,而ios就不敢苟同了,ios显示为换行,对于客户使用体验非常不好. 解决方案: html代码. <form @submit.prevent action="#"> <input class="search_input" ref="input" @focus="searchFocus" v-mo

  • Vue键盘事件用法总结

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

  • vue 实现移动端键盘搜索事件监听

    1.首先注意,input的type="serch" <input @keypress="searchGoods" type="serch" placeholder="搜索商品"> 2.监听keypress事件 (1)KeyDown.KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的.(要解释 ANSI 字符,应使用 KeyPress 事件.) (

  • vue项目中销毁window.addEventListener事件监听解析

    目录 销毁window.addEventListener事件监听 window.addEventListener监听scroll事件 解决办法 使用throttle出现的新问题 最后代码 销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录 created() {     window

  • vue各种事件监听实例(小结)

    计算属性的Get方法和Set方法 看代码说话: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue小练习</title> </head> <body> <div id="calc"> <a v-cloak="">{{name}}</a> &l

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • vue鼠标悬停事件监听实现方法

    目录 前言 情景描述 解决方法 总结 前言 开发框架为 vue2.x 情景描述 需求是这样的:页面在鼠标悬停(不动)n秒之后,页面进行相应的事件. 比如在我的需求下,是鼠标悬停15秒之后,页面上三个数据弹窗轮询展示. 解决方法 我的思路中 涉及到了三个变量 data(){ return { polling: null, timeCount: 0, judgeTimer: null, } } polling: 是 轮询的时候的一个计时器timeCount: 是 判断鼠标是否移动的一个控制变量jud

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

  • vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

    本文实例讲述了vue自定义键盘信息.监听数据变化的方法.分享给大家供大家参考,具体如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show&quo

  • 基于 jQuery 实现键盘事件监听控件

    最近项目里要做一个画板,需要对键盘事件进行监听,来进行诸如撤回.重做.移动.缩放等操作,因此顺手实现了一个键盘事件监听控件,期间略有收获,整理出来,希望对大家有所帮助,更希望能获得高手的指点. 1. 自动获取焦点 似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听,而通常需要监听事件的 <DIV>.<CANVAS> 元素都不能获得焦点,因此需要修改目标元素的某些属性使其可以获得焦点,另外一种可行的方法是将事件委托给诸如 <INPUT> 标签.这里采用的是第一类方法

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

随机推荐