当前位置: 首页> 教育> 锐评 > vue手机端 搜索框调起带搜索键盘,点击确认自动关闭

vue手机端 搜索框调起带搜索键盘,点击确认自动关闭

时间:2025/7/13 19:24:25来源:https://blog.csdn.net/qq_42740298/article/details/141676906 浏览次数:2次

效果如下图

在这里插入图片描述
步骤:

1.html,所需配置参数都在下图

<el-form :inline="true" :mode="serchFormf" class="searchForm"  action="javascript:return true;"><el-form-item label="" ><el-inputsize="small"type="search"clearableref="inputRef"v-model="serchFormf.keyword"@keyup.enter.native="getList(1)"placeholder="广告主ID/公司名称" ><i slot="prefix" class="el-input__icon el-icon-search"></i><el-button slot="append" @click="getList(1)">搜索</el-button></el-input></el-form-item></el-form>

在这里插入图片描述

2.js

1.在开始进入页面时,创建一个keydown事件(用于监控键盘)

  mounted(){window.addEventListener( 'keydown', function (e) {this.keyDown// 阻止事件冒泡e.stopPropagation();});},

2.在methods中调用该事件(其中keyCode === 13是键盘回车的时候,也就是点击搜索的时候)

  methods: {keyDown(e) {if (e.keyCode === 13) {this.getList(1); // 定义的登录方法}},getList(page) {this.$nextTick(()=>{this.$refs.inputRef.blur();})}}

在这里插入图片描述

然后就可以实现点击输入框弹窗带搜索,点击搜索后弹窗自动关闭

关键字:vue手机端 搜索框调起带搜索键盘,点击确认自动关闭

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: