#vue#使用Element输入框,使用enter回车键搜索或提交

这篇具有很好参考价值的文章主要介绍了#vue#使用Element输入框,使用enter回车键搜索或提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

搜索

如果整个表单只有一个输入框,按enter键实现搜索

<el-input  @keyup.enter.native="toFilterData"  
    v-model="formInline.students_name" ></el-input>

同时进行监听有没有输入值,在methods里,写上监听的方法,当获取的v-model里的值,按下了回车键,如果需要监听空格或者其他键,换成别的键值

 // //查询 
    toFilterData() {
    // 当用户没有输入内容就按enter键时,就return,不做任何操作,不去搜索
        if(this.formInline.students_name === '') {
             return
        } else {
        // 请求查询接口,将列表展现出来
            this.getTabletsIndex();  
         }
     },

vue+elementUI在输入框中按回车键如果依旧会刷新页面;问题原因:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent。

<el-form  @submit.native.prevent></el-form>

提交 

输入密码以后,按enter键即可登录成功

element输入框回车搜索,vue专栏,vue.js,elementui,javascript,前端,前端框架

只需要在输入框和按钮加入以下代码即可文章来源地址https://www.toymoban.com/news/detail-594889.html

 <el-form-item prop="password">
     <el-input 
         ref="password" 
         v-model="loginForm.password" 
         :type="passwordType"
         placeholder="请输入密码" 
         tabindex="2" 
        @keyup.enter.native="handleLogin" />
</el-form-item>
<el-button  :loading="loading" @click.native.prevent="handleLogin" >登录</el-button>

到了这里,关于#vue#使用Element输入框,使用enter回车键搜索或提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html中登录按钮添加回车键登录

    原文链接有3种方法,其它2中不会弄,第二种方法成功,下面详细说说 原html的登录部分是 在该html中增加 需要注意的是 中的button与原html中id属性保持一致。

    2024年02月08日
    浏览(42)
  • vue element-ui el-input输入框绑定@keyup.enter回车事件无效

    由于element-ui把input进行了封装,input外面是多一层div的。 在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 所以对于el-input,使用 @keyup.enter是无效的,需要加上 .native 限制符 .native修饰符的作用:

    2024年02月16日
    浏览(51)
  • Vue3 的 回车(enter)事件

    在消息框中输入消息,回车发送消息

    2024年02月16日
    浏览(35)
  • vue element UI使用 @keyup.enter不生效

    在按钮上绑定keyup事件,加上.native覆盖原有封装的keyup事件 使用的是element-ui按钮,因为有遇到过第一种情况绑定之后无效情况,记录下此方法。在created使用

    2024年02月15日
    浏览(43)
  • vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur

    1、@input(v-on:input) 此触发方法适合在查询条件或实时规则校验中使用。 2、@keyup.enter 此触发方法与v-on:input方法区别在于:input事件是实时监控,每次输入都会触发调用,而@keyup.enter则是在键盘点击回撤按键触发,且在手机端则需要点击输入键盘上的确定按键触发。 3、@cha

    2024年02月15日
    浏览(37)
  • Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。

    当 el-form 表单里面只有一个 el-input 输入框的时候,在输入框选中时按回车会刷新页面: 默认情况下, el-form 中只有一个输入框时, el-form 会自动为输入框添加一个 type=\\\"submit\\\" 的按钮,当按下回车键时,该按钮会触发表单的提交事件。 在el-form标签内加入 @submit.native.prevent 即可

    2024年02月11日
    浏览(53)
  • vue在input中输入后,按回车,提交数据

    1.展示效果如下: 2.代码展示: 在return data: 在methods: 在进行数据回车后可将此值push进遍历的数据中,及时查看,不必刷新,如果后台的id 是随机生成的,而不是前端提交过去的,那对此数据进行删除与编辑时,需要重新请求一遍 后台的数据,获取真实的数据库中的数据

    2024年02月15日
    浏览(37)
  • 前端实现 input 回车搜索(html,vue,react实现)

    搜索框是个常见的功能,除了 用ui库,有的时候必须要自己封装(因为改ui库太麻烦了,定制化要求很高),所以 涉及到 点击按钮搜索和回车搜索都要实现。下面就是实现的一些方法。 html里: 方式一:html里可以用 form 来实现,因为form里回车也能触发提交事件。思路就是

    2024年02月11日
    浏览(44)
  • 如何使用 Selenium 在 HTML 文本输入中模拟按 Enter 键?

    input.send_keys(Keys.ENTER) sleep(10) finally: webdriver.close() 注意:不要忘记设置 chrome web 驱动程序的路径。 🥇 评论区抽粉丝送书啦 💌 欢迎大家在评论区提出意见和建议! (抽两位幸运儿送书,实物图如下)💌 《Python数据分析与大数据处理从入门到精通》 【内容简介】 **全面:数据分

    2024年04月15日
    浏览(29)
  • element-ui输入框下拉远程搜索

    实现效果: 可以在你输入的时候出现一个下拉,将你输入的东西与下拉框的内容进行匹配,然后下拉框会显示匹配的内容  相关代码: :fetch-suggestions=\\\"querySearchAsync\\\"是定义下拉内容的函数方法,restaurants是下拉框的内容,timeout这个定时器使用来决定多少秒后显示筛选后的内容

    2024年02月05日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包