vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索

看到标题，你可能第一反应是想着监听手机键盘的【完成】或【搜索】按钮，然后触发事件do something
but ，No No No ，没有那么艰难复杂。

vue中，要在手机端点击手机键盘的【完成】或【搜索】按钮触发文本框搜索，关键点有两个：

form表单，action属性设置
@keyup.13 事件或者直接keyup 然后事件的处理函数里判断 event.keyCode === 13

必须在input标签外面套上form表单，并设置 action="javascript:void 0"，action属性很关键，不能省略。

再就是 @keyup.13 事件，这是用来绑定enter键的事件。在电脑上是enter键，在手机键盘上就是右下角的完成 / 搜索按钮了。

代码如下：

<template><div class="wrap"><form class="search-block" action="javascript:void 0"><input type="text" v-model="txtInput" @keyup.13="tapToSearch" @input="tapToSearch" ></form></div>
</template>

vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索相关推荐

手机端点击图片全屏预览
<!doctype html> 手机端点击图片全屏预览 <div class="category"><img src="1.jpg" ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
解决手机端点击输入框后页面会被放大问题
在测试手机端页面输入框时,点击后整个页面被放大,并且在离开输入框.点击页面其他地方,页面并不会恢复原来的比例,很影响美观解决方法:只需在页面头部加入两句 <meta> 标签语句即可,若是 ...
C++模拟游戏中鼠标点击和键盘按键
游戏中模拟键盘输入,有时回被系统屏蔽,Java等语言都试过很多方法,好像都没用,所以下面给出一种C++实现方法 #include <iostream> #include <windo ...
vue中el-radio-group点击事件，双击取消
vue中el-radio-group点击事件普通用法需要实现双击取消普通用法需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
vue中如何点击返回上一页，vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现你好我是弹窗里面的内容部分所触发的事件如下: ...
IOS实现点击软键盘的Next/Return按钮或者空白处后自动隐藏键盘
在开发IOS过程中,经常需要用到TextField控件.光标一旦定位到该控件,软键盘就会自动开启,用户能够在其中通过软键盘进行输入.但是,若不对软键盘进行其他操作,它是不会自动关闭的.这样就很有可能降 ...

vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索

代码如下：

vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索相关推荐

最新文章

热门文章