失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索

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

时间:2020-12-10 07:06:41

相关推荐

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中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。