vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索
看到标题,你可能第一反应是想着监听手机键盘的【完成】或【搜索】按钮,然后触发事件do somethingbut ,No No No ,没有那么艰难复杂。vue中,要在手机端点击手机键盘的【完成】或【搜索】按钮触发文本框搜索,关键点有两个:form表单,action属性设置@keyup.13 事件或者直接keyup 然后事件的处理函数里判断 event.keyCode ==...
·
看到标题,你可能第一反应是想着监听手机键盘的【完成】或【搜索】按钮,然后触发事件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>
更多推荐
已为社区贡献3条内容
所有评论(0)