经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue按回车键进行搜索的实现方式
来源:jb51  时间:2023/1/16 9:16:18  对本文有异议

Vue按回车键进行搜索

需求:

为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索

第一种方法

在input标签内部增加@keyup.enter事件即可,事件名为按钮点击名称

  1. <div class="center">
  2. ? ? ? <input placeholder="输入名称" v-model="keyword"
  3. ? ? ? ? ? ? ?@keyup.enter="getsearchdata">
  4. </div>
  5. <div class="seal" @click="getsearchdata">搜索</div>

第二种方法

  1. <div class="center">
  2. ? ? ? <input placeholder="输入名称" v-model="keyword"
  3. ? ? ? ?@keyup.enter.native="getsearchdata" @submit.native.prevent
  4. ? ? ? >
  5. </div>
  6. <div class="seal" @click="getsearchdata">搜索</div>?

注:

  1. @keyup.enter.native="getsearchdata"//这里要和搜索的事件名称一样
  2.  
  3. @submit.native.prevent //这句话禁止第一次进入页面回车搜索的时候刷新页面

这两种方法,都能实现按回车键进行搜索的功能

Vue使用回车键失效的解决

在用Vue开发一个前端页面,做的一个搜索功能,目标:输入搜索条件后,回车键直接搜索。但是得到的结果却是系统刷新,并没有搜索。这是为啥呢?对比了其他文件,代码没有错,一脸懵。后来查阅资料才发现错误,下面介绍解决方法~

Vue回车键事件

对于原生的Vue来说,要绑定回车(enter)事件,只需要:

  1. @keyup.enter="方法名"

而如果用了类似于Element UI之类的第三方UI框架的话,则得在后面加【.native】修饰符:

  1. @keyup.enter.native="方法名"

栗子

  1. <el-form-item label="名称" prop="taskName">
  2. <el-input
  3. v-model="queryParams.taskName"
  4. placeholder="请输入名称"
  5. clearable
  6. size="small"
  7. @keyup.enter.native="handleQuery"
  8. />
  9. </el-form-item>
  10. <el-form-item>
  11. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  12. </el-form-item>

回车失效原因

查考相关文档得知:

W3C 标准中有如下规定:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent。 

解决方法

  1. <el-form> 标签上添加 @submit.native.prevent。
  2. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
  • @submit: 表单提交
  • .native 绑定系统原生事件
  • .prevent 提交以后不刷新页面

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号